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

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

当前回答

你也可以这样做…

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

Evan You自己在Vue论坛上的一篇文章中推荐了这个技巧。一般来说，一些事件可能发出多个参数。同样，正如文档所述，内部变量$event用于传递原始DOM事件。

2018-05-15 15:44:13

其他回答

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

这是工作小提琴。

2016-12-04 08:36:02

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

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

2021-09-08 05:18:00

你也可以这样做…

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

2018-05-15 15:44:13

取决于你需要传递什么参数，特别是对于自定义事件处理程序，你可以这样做:

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

2019-12-28 08:00:16

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

推荐文章

最新文章

标签