Event Modifiers

Event Modifiers

When handling events, you often need to call e.preventDefault() or e.stopPropagation(). Vue provides event modifiers — special suffixes that handle these common patterns directly in the template.

Modifiers

Modifier	Equivalent	Purpose
.prevent	e.preventDefault()	Prevent the default browser behavior
.stop	e.stopPropagation()	Stop the event from bubbling up to parent elements
.once	—	The event fires only once, then the listener is removed
.self	—	Only triggers if e.target is the element itself (not a child)
.capture	—	Use capture mode instead of bubble mode

Prevent Default

<!-- Without modifier -->
<form v-on:submit="handleSubmit">  <!-- page reloads! -->

<!-- With .prevent modifier -->
<form @submit.prevent="handleSubmit">  <!-- no page reload -->

The .prevent modifier calls e.preventDefault() automatically — no need to do it inside your method.

Stop Propagation

<div @click="outerClick">
    <button @click.stop="innerClick">Click me</button>
</div>

Without .stop, clicking the button triggers both innerClick and outerClick (because the event bubbles up). With .stop, only innerClick fires.

Trigger Once

<button @click.once="doSomething">Click (only works once)</button>

Chaining Modifiers

<form @submit.prevent.stop="handleSubmit">
    <!-- Prevents default AND stops propagation -->
</form>

Key Takeaways

• Event modifiers are suffixes like .prevent, .stop, .once
• They handle common event patterns without cluttering your methods
• Modifiers can be chained: @click.prevent.stop
• Use .prevent on form submissions to prevent page reload