Olay ve argümanı Vue.js'de v-on'a geçirmek

v-on:inputDirektiflerde bir parametre iletiyorum. Bunu geçemezsem, olaya yöntemden erişebilirim. Parametreyi işleve geçirirken olaya hala erişebileceğim bir yol var mı? Vue-router kullanıyorum değil:

Bu parametreyi geçmeden. Olay nesnesine erişebilirim

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

Bu parametreyi geçerken olur. Etkinlik nesnesine erişemiyorum

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

İşte kodun snippet'i, yaşadığım sorunu çoğaltmak için yeterince iyi olmalı

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

Siz de veri geçerken erişim olay nesnesine istiyorsanız, geçmek zorunda eventve ticket.idaşağıdaki gibi parametreler, hem:

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

Bkz. Çalışan keman: https://jsfiddle.net/nee5nszL/

Düzenlendi: vue-router ile durum

Vue-router kullanıyorsanız , yönteminizde aşağıdaki gibi $ olayını kullanmanız gerekebilir v-on:input:

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

İşte keman çalışıyor .

Bunun gibi bir şey de yapabilirsiniz ...

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

Evan Bu tekniği Vue forumunda bir yazıda tavsiye ettin. Genel olarak bazı olaylar birden fazla argüman çıkarabilir. Ayrıca belgelerin belirttiği gibi dahili değişken $ olayı orijinal DOM olayını geçmek içindir.

Hangi argümanları geçmeniz gerektiğine bağlı olarak, özellikle özel olay işleyicileri için, şöyle bir şey yapabilirsiniz:

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