如何在vue指令中附加事件？
如何在vue指令中附加事件？
提问于 2017-09-09 19:05:20
我需要使用指令将函数附加到元素。我想用Vue方法$on来实现它，但是它不起作用。当我使用addEventListener时，event.target.value在第一次输入后给出了不变的值，第二次正确地工作。怎么修呢？
示例：http://jsfiddle.net/rjeu8Lc1/1/
directives: {
rinput: {
bind: function(el, bind, vnode) {
el.addEventListener('input', function(event) {
vnode.context.eventListenerCalled = true;
// wrong value on the first input in event.target.value
vnode.context.value = event.target.value; //changing data.value
});
vnode.context.$on('input', function(event) {
// never executed =(
vnode.context.vueEventListenerCalled = true;
});
}
}
}回答 1
Stack Overflow用户
发布于 2017-09-10 00:18:55
我同意伯特的观点，你不应该试图通过指令来调整Vue对象。另一方面，您应该能够设置一个事件处理程序。在事件处理程序中，event.target.value没有更新的值。这似乎与您还通过Vue附加了一个输入处理程序有关。当我移除@input="setDirty"的时候，它就修好了。所以我认为第一课是:混合事件侦听器会引起冲突。
撇开这一点不说，你实际上可以得到v-model的传真。
new Vue({
el: '#app',
data() {
return {
value: 'initial',
eventListenerCalled: false
}
},
directives: {
rinput: {
bind: function(el, bind, vnode) {
el.value = bind.value;
el.addEventListener('input', function(event) {
vnode.context.eventListenerCalled = true;
vnode.context.value = event.target.value; //changing data.value
});
}
}
}
})<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<input v-rinput="value">
<p>{{ value }}</p>
<div v-if="eventListenerCalled"> Event Listener Called </div>
</div>
这里有一个很小的片段来说明这个bug。如果Vue样式的事件处理程序修改数据，那么event.target.value在JS样式的事件处理程序(在Vue样式处理程序之后调用)中是错误的。
new Vue({
el: '#app',
data: {
value: 'initial',
isDirty: false
},
directives: {
rinput: {
bind: function(el, bind, vnode) {
el.addEventListener('input', function(event) {
console.log("Listener called", event.target.value);
});
}
}
},
methods: {
setDirty(event) {
console.log("Dirty called", event.target.value);
this.isDirty = !this.isDirty; // Without this, the listener works fine
}
}
})<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<input @input="setDirty" v-rinput="value" :value="value">
<p>{{ value }}</p>
<div v-if="isDirty"> Dirty function called </div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46134175
复制相关文章
相似问题
腾讯云开发者
