Beginner LevelVue JS
How do event modifiers (.prevent, .stop, .self) work with v-on / @click in Vue?
❓ Interview Prompt: Explain event handling with v-on / @click, inline handlers vs method handlers, and event modifiers.
The 'v-on' directive (shorthand '@') attaches event listeners to DOM elements.
Event Modifiers:
Instead of manually calling 'e.preventDefault()' or 'e.stopPropagation()' inside your methods, Vue provides declarative event modifiers chained with dots:
•
'.prevent': Calls 'event.preventDefault()' (prevents form submission or link navigation).
•
'.stop': Calls 'event.stopPropagation()' (stops event bubbling up DOM tree).
•
'.self': Triggers handler only if 'event.target' is the element itself.
•
'.once': Triggers event at most once.
•
Key Modifiers: '@keyup.enter', '@keyup.escape' filter for specific keyboard keys.
Code Implementation Example
html
<script setup>
const handleSubmit = () => console.log('Form submitted!');
const handleChildClick = () => console.log('Child clicked!');
</script>
<template>
<!-- 1. .prevent stops default form GET submission -->
<form @submit.prevent="handleSubmit">
<input type="text" @keyup.enter="handleSubmit" />
<button type="submit">Send</button>
</form>
<!-- 2. .stop prevents event bubbling to parent div -->
<div @click="console.log('Parent clicked')">
<button @click.stop="handleChildClick">Click Child</button>
</div>
</template>💡Event handling and modifier chaining with v-on / @.
🎯 Interview Key Takeaway
Use @event shorthand with modifiers like .prevent and .stop to handle DOM events declaratively.
#v-on#Events#Modifiers#Beginner
Back to all Vue JS Questions→