Передача події та аргументу 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. Загалом деякі події можуть наводити більше ніж один аргумент. Крім того, як документація констатує внутрішню змінну $ подія, призначена для передачі вихідної події DOM.

Залежно від того, які аргументи потрібно передати, особливо для користувальницьких обробників подій, ви можете зробити щось подібне:

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