How do you handle events in Vue (v-on and event modifiers)?

Q: How do you handle events in Vue (v-on and event modifiers)?

**Target Audience:** Beginners wiring up buttons, forms and keyboard shortcuts in Vue. Basic DOM events ( click , submit , keyup ) assumed; no Vue experience needed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every "what got logged" table, compiled handler and ordering claim below was produced by dispatching real DOM events at components mounted on Vue 3.5.44 in jsdom. ## 1. Why This Even Matters — A Story First Think of an office building with a receptionist on every floor. When a visitor rings a bell on the third floor, the third-floor receptionist answers. But the sound also travels down the stairwell, so the second-floor and first-floor receptionists hear it too, and each might react. Sometimes that is what you want. Sometimes the third floor should say "I have got this, nobody else move". And sometimes a ringing bell has a default consequence, such as the doors unlockin

The problem

Question presented to candidate: "A form needs a submit button that must not reload the page, a search box that reacts to Enter, and a card whose inner buttons must not trigger the card click. How do you handle these events in Vue?"

What a strong answer should cover:

v-on:event or the shorthand @event attaches a listener; the value is a method handler (@click="save", receives the native event) or an inline handler (@click="save(item.id)", use $event to get the event).
Event modifiers replace boilerplate: .prevent (preventDefault), .stop (stopPropagation), .self, .once, .capture, .passive.
Key modifiers (@keyup.enter, .esc, .tab, .delete, arrow keys, or any kebab-case KeyboardEvent.key), system modifiers (.ctrl, .alt, .shift, .meta), .exact and mouse buttons (.left, .right, .middle).
Modifiers can be chained and order matters (.prevent.self differs from .self.prevent).
On components, @event listens to events the child emits (declared with defineEmits); Vue 2 .native no longer exists.
Template listeners are attached directly to each element (no global delegation) and go away with the element when it is removed; listeners you add yourself to window or document must be removed in onUnmounted.

Clarifying questions expected:

"Is this a native DOM element or a custom component emitting events?"

Code / implementation expected: Yes. A template showing @submit.prevent, @keyup.enter and @click.stop.

vue
events
v-on
modifiers

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners wiring up buttons, forms and keyboard shortcuts in Vue. Basic DOM events (click, submit, keyup) assumed; no Vue experience needed. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts. Every "what got logged" table, compiled handler and ordering claim below was produced by dispatching real DOM events at components mounted on Vue 3.5.44 in jsdom.

1. Why This Even Matters — A Story First

Think of an office building with a receptionist on every floor. When a visitor rings a bell on the third floor, the third-floor receptionist answers. But the sound also travels down the stairwell, so the second-floor and first-floor receptionists hear it too, and each might react. Sometimes that is what you want. Sometimes the third floor should say "I have got this, nobody else move". And sometimes a ringing bell has a

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

VueMethod and inline handlers, $event, and the common event, key and system modifiers

Open in playground

<script setup>
import { ref } from "vue";

const log = ref([]);
const note = (msg) => log.value.push(msg);

// Method handler: Vue passes the native event as the first argument.
function onSave(event) {
  note(`save (${event.type} on ${event.target.tagName})`);
}
</script>

<template>
  <!-- method handler vs inline handler with $event -->
  <button class="save" @click="onSave">Save</button>
  <button class="inline" @click="note('inline ' + $event.type)">Inline</button>

  <!-- .stop: the click does not bubble up to the outer div -->
  <div class="outer" @click="note('outer div')">
    <button class="plain">bubbles</button>
    <button class="stop" @click.stop="note('stopped')">stop</button>
  </div>

  <!-- .self: only when the click starts on this element, not a child -->
  <div class="self" @click.self="note('self div')"><span class="child">child</span></div>

  <!-- .prevent: no page reload on submit -->
  <form class="form" @submit.prevent="note('submitted without reload')"><button>Send</button></form>

  <!-- .once: the handler is removed after the first call -->
  <button class="once" @click.once="note('once')">Once</button>

  <!-- key modifiers -->
  <input class="search" @keyup.enter="note('enter pressed')" @keyup.esc="note('esc pressed')" />

  <!-- .exact: Ctrl+click only, with no other system key -->
  <button class="exact" @click.ctrl.exact="note('ctrl only')">Ctrl-click</button>

  <ol class="log"><li v-for="(m, i) in log" :key="i">{{ m }}</li></ol>
</template>

VueModifier order matters: .prevent.self vs .self.prevent

Open in playground

<script setup>
import { ref } from "vue";
const log = ref([]);
</script>

<template>
  <a class="a" href="#one" @click.prevent.self="log.push('a')"><span class="sa">child A</span></a>
  <a class="b" href="#two" @click.self.prevent="log.push('b')"><span class="sb">child B</span></a>
  <p class="out">{{ log.join(",") }}</p>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.