javascript - 为什么多次使用相同的 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;
}
})
希望对你有帮助 :)
推荐阅读
- javascript - 在 React 中动态渲染图像非常困难
- javascript - Safari 在所有脚本都准备好之前不会呈现,不像 Chrome 或 Firefox
- c++ - 如何使用作为模板参数的模板
- angular - 如何从ngrx商店获取价值
- react-native - 带有标题下拉菜单的导航适用于世博小吃,但不适用于 CLI
- c - 处理有符号整数数组,就好像它包含无符号值一样
- c# - 如何为 Microsoft OAuth2 提供程序的本机应用程序指定 localhost loopback redirect_uri?
- ruby-on-rails - 访问 has_many :through with conditions
- c# - 在与方法调用 c# 相同的行中使用 await
- node.js - NodeJS Google Vision 无法在当前环境中检测到项目 ID