Vue Event Handling

We can use the v-on directive (usually abbreviated as the @ symbol) to listen to DOM events and run some JavaScript code when triggered. This allows us to create interactive user interfaces.

Listening to Events

Usage is v-on:click="methodName" or using the shorthand @click="methodName".

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <!-- When the button is clicked, the increment method is called -->
  <button @click="increment">Count is: {{ count }}</button>
</template>

Inline Event Handlers

Besides directly binding to a method, you can also execute simple statements in inline handlers:

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <!-- Write JavaScript directly in the event handler -->
  <button @click="count++">Add 1</button>
  <p>The count is: {{ count }}</p>
</template>

Passing Parameters in Methods

When handling events, you often need to pass parameters to the method.

<script setup>
function greet(name) {
  alert(`Hello, ${name}!`)
}
</script>

<template>
  <button @click="greet('Vue')">Greet</button>
</template>

Accessing Event Arguments

Sometimes, we need to access the original DOM event object. You can use the special $event variable to pass it into the method:

<script setup>
function warn(message, event) {
  // event is the native DOM event
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
</script>

<template>
  <button @click="warn('Form cannot be submitted yet.', $event)">Submit</button>
</template>

Event Modifiers

When handling events, we often need to call event.preventDefault() or event.stopPropagation(). To solve this problem, Vue provides event modifiers for v-on. Modifiers are directive suffixes starting with a dot.

• .stop: Calls event.stopPropagation().
• .prevent: Calls event.preventDefault().
• .capture: Adds event listener in capture mode.
• .self: Only triggers callback when the event is triggered from the element to which the listener is bound itself.
• .once: Click event will only trigger once.
• .passive: Tells the browser you don't want to prevent the event's default behavior.

<!-- Prevents click event from propagating further -->
<a @click.stop="doThis"></a>

<!-- Submit event will not reload the page -->
<form @submit.prevent="onSubmit"></form>

<!-- Modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>

<!-- Modifiers only -->
<form @submit.prevent></form>

<!-- Only trigger handler when event.target is the current element itself -->
<!-- i.e., the event was not triggered from an inner element -->
<div @click.self="doThat">...</div>

Key Modifiers

When listening to keyboard events, we often need to check for specific keys. Vue allows adding key modifiers to v-on when listening to keyboard events:

<!-- Only calls submit when `key` is `Enter` -->
<input @keyup.enter="submit">

Vue provides aliases for the most commonly used keys:

• .enter
• .tab
• .delete (captures both "Delete" and "Backspace" keys)
• .esc
• .space
• .up
• .down
• .left
• .right

You can also directly use any valid key name as a modifier, for example @keyup.page-down.