为什么多次使用相同的 vue 指令会调用所有指令的更新? [英] Why does using the same vue directive multiple times call updates on all of them?
问题描述
我创建了一个 vue 指令,我将它附加到同一页面上的多个输入元素,并且注意到当我开始输入其中一个元素时,页面中的所有元素都会触发 'update' 事件.我原以为只有一个事件,对于我更新的特定元素.
我的问题是,有没有办法阻止事件触发,或过滤事件以便我只能处理正在更改的输入?
这是我的指令和视图的代码:
Vue.directive('test', {绑定:(el) =>{console.log(el.id + "bound")},更新:(el) =>{console.log(el.id + "更新")}})新的 Vue({el: "#app",数据: {测试值1:空,testval2:空,},方法: {}})
和模板:
<input id="testinput1" v-model="testval1" v-test/><input id="testinput2" v-model="testval2" v-test/>
这是问题的 JSFiddle:https://jsfiddle.net/eywraw8t/415288/
在这个 JSFiddle 中,您可以在控制台中看到,如果您在输入字段中输入,它会触发两个输入字段的更新.
我认为最好的方法是使用 bind.您的指令将有一个指令适用于指定了 v-test 指令的每个元素.这是解决您问题的简单方法
Vue.directive('test', {绑定:(el) =>{console.log(el.id + "bound")const 处理程序 = (e) =>{console.log('e', e.target)如果(el == e.target){console.log(el.id + "射击")}}el.vueTest = 处理程序//添加事件监听器document.addEventListener('input', handler)},解除绑定(el,绑定){//移除事件监听器document.removeEventListener('input', el.vueTest);el.vueTest = null;}})
希望对你有帮助:)
I've created a vue directive that I'm attaching to multiple input elements on the same page, and have noticed that when I start typing in one of them, the 'update' event fires for all elements in the page. I had expected to only have one event, for the particular element that I had updated.
My question is, Is there a way to prevent the event firing, or filtering the events so that I can handle only the input that is changing?
Heres the code for my directive and view:
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: {
}
})
and the template:
<div id="app">
<input id="testinput1" v-model="testval1" v-test />
<input id="testinput2" v-model="testval2" v-test />
</div>
Here is a JSFiddle of the issue: https://jsfiddle.net/eywraw8t/415288/
In this JSFiddle, you can see in the console that if you type into the input field, it fires the update for both input fields.
I think the best way is to use bind. Your directive there will be a directive that works on every element with v-test directive specified. Here is simple approach to solve your issue
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;
}
})
Hope this will help you :)
这篇关于为什么多次使用相同的 vue 指令会调用所有指令的更新?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!