在 Vue.js 中将事件和参数传递给 v-on
我在 v-on:input 指令中传递了一个参数。如果我不通过它，我可以访问方法中的事件。将参数传递给函数时，我仍然可以访问事件吗？请注意，我使用的是 vue-router。
这是没有传递参数的。我可以访问事件对象：
HTML
<input type="number" v-on:input="addToCart" min="0" placeholder="0">
Javascript
methods: {
addToCart: function (event) {
// I need to access the element by using event.target
console.log('In addToCart')
console.log(event.target)
}
}
这是传递参数的时候。我无法访问事件对象：
HTML
<input type="number" v-on:input="addToCart(ticket.id)" min="0" placeholder="0">
Javascript
methods: {
addToCart: function (id) {
// How can I access the element by using event
console.log('In addToCart')
console.log(id)
}
}
这是代码的一部分，它应该足以复制我遇到的问题：
如果要访问事件对象以及传递的数据，则必须将 event 和 ticket.id 都作为参数传递，如下所示：
HTML
<input type="number" v-on:input="addToCart($event, ticket.id)" min="0" placeholder="0">
Javascript
methods: {
addToCart: function (event, id) {
// use event here as well as id
console.log('In addToCart')
console.log(id)
}
}
请参阅工作小提琴：https://jsfiddle.net/nee5nszL/
已编辑：vue-router 案例
如果您使用的是 vue-router，您可能必须在 v-on:input 方法中使用 $event，如下所示：
<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">
这里正在工作 fiddle。
你也可以做这样的事情......
<input @input="myHandler('foo', 'bar', ...arguments)">
Evan You 本人在 Vue 论坛上的一篇文章中推荐了这种技术。通常，某些事件可能会发出多个参数。同样作为 documentation states 内部变量 $event 用于传递原始 DOM 事件。
根据您需要传递的参数，特别是对于自定义事件处理程序，您可以执行以下操作：
<div @customEvent='(arg1) => myCallback(arg1, arg2)'>Hello!</div>
我喜欢这种传递参数的方式，因为我们可以使用匿名回调函数来传递事件和参数。
<button v-on:click="(e)=>deleteHandler(e, args1)" > Click me </button>
$event 变量用于更短的表达式：@click="deleteHandler($event, args1)"。
关注公众号
不定期副业成功案例分享
Property or method "event" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data optionv-on:input？$event变量传递给方法调用v-on:input="addToCart($event, num)"$event，而不是event