Vue Tip: Pass Custom Arguments to Event Handler Method

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:

<script setup>
const name = ref('Vue.js')

const greet = (event) => {
  alert(`Hello ${name.value}!`)
  if (event) {
    alert(event.target.tagName)
  }
}
</script>

<template>
  <button @click="greet">Greet</button>
</template>

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

<script setup>
const name = ref('Vue.js')

const greet = (event, name) => {
  alert(`Hello ${name.value}!`)
  if (event) {
    alert(event.target.tagName)
  }
}
</script>

<template>
  <button @click="greet($event, “Michael”)">Greet</button>
</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.