[解決済み】Vue.jsでv-onにイベントと引数を渡す。

質問

でパラメータを渡すと v-on:input ディレクティブを使用します。これを渡さない場合、メソッド内のイベントにアクセスできます。関数にパラメータを渡した場合でも、イベントにアクセスできる方法はありますか？私はvue-routerを使用していることに注意してください。

これはパラメータを渡さない場合です。イベントオブジェクトにアクセスすることができます。

HTML

<input type="number" v-on:input="addToCart" min="0" placeholder="0">

ジャバスクリプト

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">

ジャバスクリプト

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">

ジャバスクリプト

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を使用している場合、以下のように イベント の中で v-on:input メソッドを以下のように変更します。

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

以下、作業中です。 フィドル .