Event modifiers (prevent, stop, once) in Vue - Mini Project: Build & Apply

Using Vue Event Modifiers: prevent, stop, once

📖 Scenario: You are building a simple Vue app with buttons that respond to clicks. You want to control how these clicks behave using Vue's event modifiers to prevent default actions, stop event bubbling, and ensure a click happens only once.

🎯 Goal: Create a Vue component with three buttons demonstrating the prevent, stop, and once event modifiers. Each button should show a message when clicked, but behave differently based on the modifier used.

📋 What You'll Learn

Create a Vue component with a template containing three buttons

Add a data property called message initialized as an empty string

Use @click.prevent on the first button to prevent default behavior and update message

Use @click.stop on the second button to stop event propagation and update message

Use @click.once on the third button so it only triggers once and updates message

Display the message below the buttons

💡 Why This Matters

🌍 Real World

Event modifiers help control user interactions in web apps, such as preventing form submissions, stopping clicks from affecting parent elements, or limiting actions to a single occurrence.

💼 Career

Understanding Vue event modifiers is essential for frontend developers to build interactive and user-friendly interfaces that behave correctly under various user actions.

1

Set up Vue component with data property

Create a Vue component with a template containing three buttons labeled Prevent, Stop, and Once. Add a data function returning an object with a message property set to an empty string.

Vue

  Prevent
  Stop
  Once
  {{ message }}



// Add data property message here

Need a hint?

Use ref from Vue to create a reactive message variable initialized to an empty string.

2

Add click handler functions

Add three functions named handlePrevent, handleStop, and handleOnce inside the <script setup> section. Each function should set message.value to a string describing which button was clicked: "Prevent clicked", "Stop clicked", and "Once clicked" respectively.

Vue

  Prevent
  Stop
  Once
  {{ message }}



import { ref } from 'vue'

const message = ref('')

// Add three functions: handlePrevent, handleStop, handleOnce
// Your code here

Need a hint?

Define each function to update message.value with the correct text.

3

Add event modifiers to buttons

In the template, add @click.prevent="handlePrevent" to the first button, @click.stop="handleStop" to the second button, and @click.once="handleOnce" to the third button.

Vue

  Prevent 
  Stop 
  Once 
  {{ message }}



import { ref } from 'vue'

const message = ref('')

function handlePrevent() {
  message.value = 'Prevent clicked'
}

function handleStop() {
  message.value = 'Stop clicked'
}

function handleOnce() {
  message.value = 'Once clicked'
}

Need a hint?

Use Vue event modifiers prevent, stop, and once on the respective buttons with the correct handler functions.

4

Add a parent container with a click event to test stop modifier

Wrap the three buttons and the message paragraph inside a <div> with a @click event handler named parentClick. Add the parentClick function in <script setup> that sets message.value to "Parent clicked". This will help demonstrate the stop modifier effect.

Vue

  
    Prevent
    Stop
    Once
    {{ message }}
  



import { ref } from 'vue'

const message = ref('')

function handlePrevent() {
  message.value = 'Prevent clicked'
}

function handleStop() {
  message.value = 'Stop clicked'
}

function handleOnce() {
  message.value = 'Once clicked'
}

// Add parentClick function here

Need a hint?

Wrap the buttons and message in a div with a @click event calling parentClick. Define parentClick to update message.value.