vue.js - 在 Vue.js 中将事件和参数传递给 v-on

Question

我在 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/

Answer 1

如果你想访问事件对象以及传递的数据，你必须将 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)
  }
}

参见工作 fiddle :https://jsfiddle.net/nee5nszL/

已编辑:vue-router 案例

如果您使用的是 vue-router，您可能必须使用 $event在您的 v-on:input 方法中，如下所示:

<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">

这里正在工作fiddle .