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你自己在Vue论坛的一篇文章中推荐了这种技巧。通常，某些事件可能会发出多个参数。同样，documentation states内部变量$ event用于传递原始DOM事件。

Answer 3

根据需要传递的参数（尤其是自定义事件处理程序），您可以执行以下操作：

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

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

3 个答案:

已编辑：vue-router