Event Handling

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Use inline and method event handlers
Use the prevent and key modifiers

Let's break it down simply

@click is shorthand for v-on:click. You can write a simple assignment as an inline handler, but for anything more involved, write a dedicated function. Modifiers like .prevent, .stop, and .enter keep your DOM logic clean.

vue

<script setup>
import { ref } from 'vue'
const name = ref('')
function save() {
  console.log(`Saved: ${name.value}`)
}
</script>

<template>
  <form @submit.prevent="save">
    <input v-model="name" @keyup.esc="name = ''">
    <button>Save</button>
  </form>
</template>

You should see

Saved: Mya

Try it yourself

Build a form that adds a new item when you press Enter and clears the input when you press Escape.

Event Handling — Vue.js

Easy traps

Forgetting preventDefault on a submit event
Writing overly long logic directly in the template

Exercise

Build a form that adds a new item when you press Enter and clears the input when you press Escape.

You'll know it worked when: Saved: Mya