Event Handling

Listening to Events with v-on

The v-on directive (shorthand: @) attaches an event listener to an element, running an expression or method when that event fires.

<template>
  <button v-on:click="count++">Add (long form)</button>
  <button @click="count++">Add (shorthand)</button>
</template>

Inline Handlers vs Method Handlers

A short expression can live directly in the template. Anything more involved should call a named function defined in <script setup>.

<script setup>
import { ref } from 'vue';
const count = ref(0);

function increment() {
  count.value++;
  console.log('Count is now', count.value);
}
</script>

<template>
  <button @click="increment">Add</button>
</template>

Accessing the Event Object

A method handler automatically receives the native DOM event as its argument. When calling a method with your own arguments, pass the special $event variable to still access it.

<script setup>
function logInput(event) {
  console.log(event.target.value);
}

function warn(message, event) {
  console.log(message, event.target.tagName);
}
</script>

<template>
  <input @input="logInput" />
  <button @click="warn('Clicked!', $event)">Click</button>
</template>

Event Modifiers

Vue provides modifiers — chained after the event name with a dot — that handle common needs like preventDefault() and stopPropagation() declaratively, without cluttering your method with DOM API calls.

<form @submit.prevent="handleSubmit">
  <button type="submit">Save</button>
</form>

Key Modifiers

For keyboard events, Vue offers key modifiers so you don't need to manually check event.key inside your handler.

<input @keyup.enter="submitForm" />
<input @keyup.esc="clearInput" />

FAQs

Summary

v-on (or @) attaches event listeners, with modifiers covering the most common needs declaratively. Next, you'll build two-way binding for form inputs with v-model.