在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,则可能必须 在方法中使用$ event,v-on:input如下所示:

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

这是工作小提琴.

Answer 2

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

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

Answer 3

您也可以做这样的事情...

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

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

Answer 4

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

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