Sometimes, we want to pass event and argument to v-on in Vue.js.
In this article, we’ll look at how to pass event and argument to v-on in Vue.js.
How to pass event and argument to v-on in Vue.js?
To pass event and argument to v-on in Vue.js, we can call the event handler method with $event and whatever argument.
And then we can retrieve the arguments from the method parameters in the same order.
For instance, we write
<template>
<input type="number" @input="addToCart($event, ticket.id)" />
</template>
<script>
export default {
//...
methods: {
addToCart(event, id) {
console.log(id);
},
},
//...
};
</script>
to call addToCart with the $event object and the ticket.id property.
$event has the event object emitted with the input event.
In the addToCart method, we access $event from event and ticket.id from id.
Conclusion
To pass event and argument to v-on in Vue.js, we can call the event handler method with $event and whatever argument.
And then we can retrieve the arguments from the method parameters in the same order.
