ディレクティブでパラメータを渡します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)
}
}
ここにコードの一部を示します。私が抱えている問題を再現するには十分なはずです。
ベストアンサー1
渡されたデータだけでなくイベント オブジェクトにもアクセスしたい場合は、次のように両方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">
ここで働いていますフィドル。