Передача события и аргумента в v-on в Vue.js

Я передаю параметр в 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/

Если вы хотите , чтобы объект события доступа, а также передаваемые данные, вы должны пройти 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">

Здесь работает скрипка .

Вы также можете сделать что-то вроде этого ...

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

Эван Ты сам рекомендовал эту технику в одном посте на форуме Vue. В целом, некоторые события могут выдавать более одного аргумента. Также, как указано в документации, внутренняя переменная $ event предназначена для передачи исходного DOM-события.

В зависимости от того, какие аргументы вам нужно передать, особенно для пользовательских обработчиков событий, вы можете сделать что-то вроде этого:

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