Passando evento e argumento para v-on no Vue.js

Eu passo um parâmetro nas v-on:inputdiretivas. Se eu não passar, posso acessar o evento no método Ainda existe alguma maneira de acessar o evento ao passar o parâmetro para a função. Não que eu esteja usando o vue-router:

Isso sem passar o parâmetro. Eu posso acessar o objeto de evento

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

É quando passa o parâmetro. Não consigo acessar o objeto de evento

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

Aqui está um trecho do código, que deve ser bom o suficiente para replicar o problema que estou tendo

https://jsfiddle.net/lookman/vdhwkrmq/

Se você deseja acessar o objeto de evento, bem como os dados transmitidos, precisará passar evente ticket.idambos como parâmetros, como a seguir:

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

Veja violino de trabalho: https://jsfiddle.net/nee5nszL/

Editado: caso com vue-router

Caso você esteja usando o vue-router, talvez seja necessário usar $ event no seu v-on:inputmétodo, como a seguir:

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

Aqui está trabalhando violino .

Você também pode fazer algo assim ...

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

Evan Você mesmo recomendou esta técnica em um post no fórum Vue. Em geral, alguns eventos podem emitir mais de um argumento. Além disso, como a documentação declara que a variável interna $ event é para passar o evento DOM original.

Dependendo dos argumentos que você precisa passar, especialmente para manipuladores de eventos personalizados, é possível fazer algo assim:

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