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.