왜 같은 vue 디렉티브를 여러 번 사용하여 모든 vue 디렉티브에 대해 업데이트를 호출합니까?

왜 같은 vue 디렉티브를 여러 번 사용하여 모든 vue 디렉티브에 대해 업데이트를 호출합니까?

같은 페이지의 여러 입력 요소에 첨부하는 vue 디렉티브를 작성했는데, 그 중 하나를 입력하기 시작하면 페이지 내의 모든 요소에 대해 '업데이트' 이벤트가 발생한다는 것을 알게 되었습니다.업데이트한 특정 요소에 대해 하나의 이벤트만 있을 것으로 예상했습니다.

질문입니다. 이벤트 발생을 방지하거나 변경되는 입력만 처리할 수 있도록 이벤트를 필터링할 수 있는 방법이 있습니까?

내 지시와 견해에 대한 코드는 다음과 같습니다.

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에서는 입력 필드에 입력하면 양쪽 입력 필드에 대해 업데이트가 실행됨을 콘솔에서 확인할 수 있습니다.

바인드를 사용하는 것이 가장 좋은 방법이라고 생각합니다.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;
  }
})

이것이 도움이 되기를 바랍니다:)

요소를 다음 위치에 저장할 수 있습니다.bind에서 확인해 주세요.update다음과 같습니다.

Vue.directive('test', (() => {
  let element;
  return {
    bind(el) {
      element = el;
      console.log(el.id + " bound");
    },
    update(el) {
      if (element === el) {
        console.log(el.id + " updated");
      }
    },
  };
})());

언급URL : https://stackoverflow.com/questions/52771602/why-does-using-the-same-vue-directive-multiple-times-call-updates-on-all-of-them