Przekazywanie zdarzenia i argumentu do v-on w Vue.js

Przekazuję parametr w v-on:inputdyrektywach. Jeśli go nie zdam, uzyskam dostęp do zdarzenia w metodzie. Czy istnieje sposób, w jaki mogę nadal uzyskać dostęp do zdarzenia podczas przekazywania parametru do funkcji. Nie to, że używam routera vue:

Dzieje się to bez przekazywania parametru. Mam dostęp do obiektu zdarzenia

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

Dzieje się tak podczas przekazywania parametru. Nie mam dostępu do obiektu zdarzenia

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

Oto fragment kodu, który powinien wystarczyć, aby odtworzyć problem, który mam

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

Jeśli chcesz uzyskać dostęp do obiektu zdarzenia, jak również przekazanych danych, musisz przekazać eventi ticket.idoba jako parametry, takie jak:

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

Zobacz działające skrzypce: https://jsfiddle.net/nee5nszL/

Edytowano: sprawa z routerem vue

Jeśli używasz vue-routera, być może będziesz musiał użyć $ event w swojej v-on:inputmetodzie, jak poniżej:

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

Tutaj działa skrzypce .

Możesz też zrobić coś takiego ...

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

Sam Evan You polecił tę technikę w jednym poście na forum Vue. Ogólnie rzecz biorąc, niektóre zdarzenia mogą emitować więcej niż jeden argument. Jak podaje dokumentacja, wewnętrzna zmienna $ event jest przeznaczona do przekazywania oryginalnego zdarzenia DOM.

W zależności od tego, jakie argumenty musisz przekazać, szczególnie w przypadku niestandardowych programów obsługi zdarzeń, możesz zrobić coś takiego:

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