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

158

我在v-on:input指令中传递参数。如果没有通过，则可以在方法中访问该事件。将参数传递给函数时，还有什么方法可以访问事件？并不是说我正在使用vue-router：

这没有传递参数。我可以访问事件对象

的HTML

<input type="number" v-on:input="addToCart" min="0" placeholder="0">

Java脚本

  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">

Java脚本

  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/

vue.js

— 壁虎
source

Answers:

241

如果要访问事件对象以及传递的数据，则必须传递 event和ticket.id作为参数，如下所示：

的HTML

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

Java脚本

methods: {
  addToCart: function (event, id) {
    // use event here as well as id
    console.log('In addToCart')
    console.log(id)
  }
}

参见工作提琴： https //jsfiddle.net/nee5nszL/

编辑：案例与VUE路由器

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

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

这是工作的小提琴。

— 索拉卜
source

我尝试过但收到错误消息

Property or method "event" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

— geckob

@geckob你通过从HTML事件：v-on:input？

— 萨拉巴

不知道这是否相关，但是我正在使用vue-router，这发生在部分之一中

— geckob

@Saurabh @geckob为了避免错误，您需要将特殊$event变量传递给方法调用v-on:input="addToCart($event, num)"

— williamukoh

您应该通过$event，而不是event

— Michael Tranchida

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

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

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

— pu
source

jsfiddle.net/50wL7mdz/30115 请注意，使用* .vue组件时，将扩展传播语法，但如果使用浏览器内编译，则不会。

— ИльяЗеленько

“ ... arguments”和“ $ event”之间有区别吗？

— 拉斐尔

@Raphael有区别！使用“ $ event”参数时，您只能从事件中传递一个参数。

— Piotr Dawidiuk

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

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

— 杰森芬克
source