Javascript is required
·
1 min read

Vue Tip: Pass Custom Arguments to Event Handler Method

Vue Tip: Pass Custom Arguments to Event Handler Method Image

In Vue, we use the v-on (typically shortened with the @ symbol) to listen to DOM events and run some JavaScript code when triggered.

We can use inline handlers or method handlers if the logic for the event handler is more complex:

Component.vue
1<script setup>
2const name = ref('Vue.js')
3
4const greet = (event) => {
5  alert(`Hello ${name.value}!`)
6  if (event) {
7    alert(event.target.tagName)
8  }
9}
10</script>
11
12<template>
13  <button @click="greet">Greet</button>
14</template>

Sometimes we need to pass custom arguments to the method and access the original DOM event:

Component.vue
1<script setup>
2const name = ref('Vue.js')
3
4const greet = (event, name) => {
5  alert(`Hello ${name.value}!`)
6  if (event) {
7    alert(event.target.tagName)
8  }
9}
10</script>
11
12<template>
13  <button @click="greet($event, “Michael”)">Greet</button>
14</template>

The original DOM event is accessible via the unique $event variable. Custom arguments can be added by calling the method in an inline handler instead of directly binding it to a method name.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.