在 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)
  }
}

查看工作小提琴：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。

Answer 2

你也可以这样做......

<input @input="myHandler('foo', 'bar', ...arguments)">

Evan You 本人在 Vue 论坛上的一篇文章中推荐了这种技术。通常，某些事件可能会发出多个参数。同样，documentation states 内部变量 $event 用于传递原始 DOM 事件。

Answer 3

根据您需要传递的参数，特别是对于自定义事件处理程序，您可以执行以下操作：

<div @customEvent='(arg1) => myCallback(arg1, arg2)'>Hello!</div>

Answer 4

我喜欢这种传递参数的方式，因为我们可以使用匿名回调函数来传递事件和参数。

<button v-on:click="(e)=>deleteHandler(e, args1)" > Click me </button>