Блог

Только вчера начал изучать Vue, и мне это нравится. Я пытаюсь вызвать событие, когда пользователь нажимает на привязку с номером телефона:

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

    }
})
  

Проблема в том, что я хотел бы (в данном конкретном случае) не добавлять v-on: click =»» к фактическому элементу. Это потому, что я имею дело с CMS, где пользователи могут добавлять ссылки на номера телефонов, где они не добавляли бы атрибуты vue в разметку.

Есть какой-нибудь способ добиться этого?

Спасибо!

У вас есть ссылка на корневой элемент DOM компонента через this.$el .

Вы можете добавить прослушиватель щелчков в mounted перехват (вам также нужно будет удалить прослушиватель из destroyed перехвата):

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

Вот рабочий пример:

 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>