Melewati acara dan argumen ke v-on di Vue.js

Saya melewatkan parameter dalam v-on:inputarahan. Jika saya tidak lulus, saya bisa mengakses acara dalam metode ini. Apakah ada cara saya masih bisa mengakses acara ketika melewati parameter ke fungsi. Bukan berarti saya menggunakan vue-router:

Ini tanpa melewati parameter. Saya dapat mengakses objek acara

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

Ini ketika melewati parameter. Saya tidak dapat mengakses objek acara

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

Berikut ini beberapa cuplikan kode, harus cukup baik untuk mereplikasi masalah yang saya alami

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

Jika Anda ingin mengakses objek acara serta data yang dikirimkan, Anda harus meneruskan eventdan ticket.idkeduanya sebagai parameter, seperti berikut:

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

Lihat biola yang berfungsi: https://jsfiddle.net/nee5nszL/

Diedit: case dengan vue-router

Jika Anda menggunakan vue-router, Anda mungkin harus menggunakan $ event dalam v-on:inputmetode Anda seperti berikut:

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

Ini biola yang berfungsi .

Anda juga dapat melakukan sesuatu seperti ini ...

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

Evan You sendiri merekomendasikan teknik ini dalam satu posting di forum Vue. Secara umum beberapa peristiwa dapat memancarkan lebih dari satu argumen. Juga sebagai dokumentasi menyatakan variabel internal $ event dimaksudkan untuk melewati acara DOM asli.

Bergantung pada argumen apa yang perlu Anda sampaikan, terutama untuk penangan peristiwa khusus, Anda dapat melakukan sesuatu seperti ini:

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