Почему использование одной и той же директивы vue несколько раз вызывает обновления для всех них?

Question

Я создал директиву vue, которую присоединяю к нескольким элементам ввода на одной странице, и заметил, что когда я начинаю набирать один из них, событие «update» срабатывает для всех элементов на странице.Я ожидал, что будет только одно событие для конкретного элемента, который я обновил.

Мой вопрос таков: есть ли способ предотвратить запуск или фильтрацию событий, чтобы я мог обрабатывать только входные данные, которые меняются?

Вот код для моегодиректива и вид:

Vue.directive('test', {
  bind: (el) => {
    console.log(el.id + " bound")
  },
  update: (el) => {
    console.log(el.id + " updated")
  }
})

new Vue({
  el: "#app",
  data: {
    testval1: null,
    testval2: null,
  },
  methods: {
  }
})

и шаблон:

<div id="app">
  <input id="testinput1" v-model="testval1" v-test />
  <input id="testinput2" v-model="testval2" v-test />
</div>

Вот JSFiddle вопроса: https://jsfiddle.net/eywraw8t/415288/

В этом JSFiddle вы можете видеть в консоли, что если вы вводите в поле ввода, оно запускает обновление для обоих полей ввода.

Answer 1

Я думаю, что лучше всего использовать связывание.Ваша директива будет директивой, которая работает на каждом элементе с указанной директивой v-test.Вот простой подход к решению вашей проблемы

Vue.directive('test', {


  bind: (el) => {
    console.log(el.id + " bound")
    const handler = (e) => {
        console.log('e', e.target)
      if (el == e.target) {
        console.log(el.id + " firing")
      }
    }
    el.vueTest = handler
    // add Event Listeners
    document.addEventListener('input', handler)
  },
  unbind (el, binding) {
    // Remove Event Listeners
    document.removeEventListener('input', el.vueTest);
    el.vueTest = null;
  }
})

Надеюсь, это поможет вам:)