Vue.js add event listener inside instance?

Question

Just started learning Vue yesterday and I love it. I'm trying to trigger an event when a user clicks on an anchor with a phone number:

var phoneNumbers = new Vue({
    el: "a[href^='tel:']",
    methods: {
        onClick() { console.log('a phone number was clicked'); }

    }
})

The issue is, I would like to (in this particular case), not have to add v-on:click="" to the actual element. This is because I'm dealing with a CMS where users may add links to phone numbers where they wouldn't be adding the vue attributes to the markup.

Any way of accomplishing this?

Thanks!

tony19 · Accepted Answer · 2022-07-15 20:11:21Z

17

You have a reference to the component's root DOM element via this.$el.

You can add a click listener in the mounted hook (you'll also need to remove the listener in the destroyed hook as well):

mounted() {
  this.$el.addEventListener('click', this.onClick);
},
destroyed() {
  this.$el.removeEventListener('click', this.onClick);
}

Here's a working example:

Vue.config.productionTip = false;
Vue.config.devtools = false;

var phoneNumbers = new Vue({
  el: "a[href^='tel:']",
  methods: {
    onClick() { 
      console.log('a phone number was clicked'); 
    }
  },
  mounted() {
    this.$el.addEventListener('click', this.onClick);
  },
  destroyed() {
    this.$el.removeEventListener('click', this.onClick);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<a href="tel:5555555555">555-555-5555</a>

edited Jul 15, 2022 at 20:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 8, 2019 at 16:55

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js add event listener inside instance?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related