Vue Event Modifiers

Vue Event Modifiers

In vanilla JavaScript, you frequently need to call event.preventDefault() or event.stopPropagation().

This prevents default browser behaviors, like forms refreshing the page upon submission.

Vue makes this incredibly easy by providing "Event Modifiers".

What are Event Modifiers?

Event modifiers are special postfixes appended to your v-on (or @) directives.

They are denoted by a dot (.).

They instruct Vue to handle the DOM event manipulation for you, keeping your methods purely focused on data logic.

The .prevent Modifier

The .prevent modifier is the most commonly used modifier in Vue.

It calls event.preventDefault() behind the scenes.

When attached to a <form> submit event, it stops the browser from reloading the entire page.

<form @submit.prevent="submitForm">
  <button type="submit">Submit without reloading!</button>
</form>

Other Common Modifiers

Vue offers several other modifiers to control event propagation:

• .stop: Stops the event from bubbling up to parent elements (event.stopPropagation()).
• .once: Ensures the event handler is triggered at most exactly one time.
• .self: Only triggers the handler if the event was dispatched from that exact element itself.

Key Modifiers

Listening for specific keyboard keys is also extremely common, especially the "Enter" key.

Vue provides Key Modifiers to easily listen for specific keystrokes.

You can chain the key name directly after the event, such as @keyup.enter.

<!-- Only fires submit() when the 'Enter' key is released -->
<input @keyup.enter="submit" />