我在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)
}
}
这是一个提琴的代码，它应该是足够好的复制的问题，我有:
https://jsfiddle.net/lookman/vdhwkrmq/
如果你想访问事件对象以及传递的数据，你必须传递事件和票据。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:输入法中使用$event，如下所示:
<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">
这是工作小提琴。
如果你想访问事件对象以及传递的数据，你必须传递事件和票据。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:输入法中使用$event，如下所示:
<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">
这是工作小提琴。
