Pasando evento y argumento a v-on en Vue.js

Paso un parámetro en las directivas v-on:input. Si no lo paso, puedo acceder al evento en el método. ¿Hay alguna manera de que todavía pueda acceder al evento al pasar el parámetro a la función. No es que esté usando vue-router:

Esto es, sin pasar el parámetro. Puedo acceder al objeto event

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

Esto es cuando se pasa el parámetro. No puedo acceder al evento objeto

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

Aquí hay un fragmento del código, debería ser lo suficientemente bueno para replicar el problema que estoy teniendo

Https://jsfiddle.net/lookman/vdhwkrmq /

 39
vue.js
Author: geckob, 2016-12-04
Source

2 answers

Si desea acceder al objeto de evento, así como a los datos pasados, debe pasar event y ticket.id ambos como parámetros, como los siguientes:

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

Ver violín de trabajo: https://jsfiddle.net/nee5nszL /

Editado: caso con vue-router

En caso de que esté utilizando vue-router, es posible que tenga que usar event event en su método v-on:input como sigue: 

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

Aquí está funcionando fiddle .

 80
Author: Saurabh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-30 18:56:57

También puedes hacer algo como esto...

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

Evan Usted mismo recomendó esta técnica en un post en el foro de Vue. En general, algunos eventos pueden emitir más de un argumento. También como la documentación indica la variable interna event event está destinada a pasar el evento DOM original.

 2
Author: xpuu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-15 15:44:13