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

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

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'
}

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

Hint

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

Practice

1. What does the .prevent event modifier do in Vue?

easy

A. Delays the event handler execution

B. Stops the default browser action for the event

C. Runs the event handler only once

D. Stops the event from bubbling up the DOM tree

Solution

1. Step 1: Understand the purpose of .prevent

   The .prevent modifier is used to stop the default action the browser takes when an event happens, like submitting a form or following a link.

2. Step 2: Compare with other modifiers

   .stop stops event bubbling, and .once runs the handler once, so they do not match the behavior of .prevent.

3. Final Answer:

   Stops the default browser action for the event -> Option B

4. Quick Check:

   .prevent stops default action [OK]

Hint: Remember: prevent stops default browser actions [OK]

Common Mistakes:

• Confusing .prevent with .stop
• Thinking .prevent runs handler once
• Assuming .prevent delays event

2. Which of the following is the correct syntax to use the .once modifier on a button click event in Vue?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Vue event modifier syntax

   Modifiers come after the event name separated by a dot, like @click.once.

2. Step 2: Check each option's syntax

   <button @click.once="handleClick">Click me</button> uses correct syntax. <button @once.click="handleClick">Click me</button> reverses modifier and event. <button v-on:once-click="handleClick">Click me</button> uses invalid directive. <button @click.once()="handleClick">Click me</button> adds parentheses incorrectly.

3. Final Answer:

   <button @click.once="handleClick">Click me</button> -> Option A

4. Quick Check:

   Correct modifier syntax = Click me [OK]

Hint: Event.modifier order is event then dot then modifier [OK]

Common Mistakes:

• Placing modifier before event name
• Adding parentheses after modifier
• Using invalid directive names

3. Consider this Vue template snippet:

<button @click.once.prevent="submitForm">Submit</button>

What will happen when the button is clicked twice quickly?

medium

A. The form submits once, default action prevented once

B. The form submits twice, default action prevented both times

C. The form submits once, default action not prevented

D. The form does not submit at all

Solution

1. Step 1: Analyze the modifiers .once and .prevent

   .once ensures the handler runs only once. .prevent stops the default browser action on that event.

2. Step 2: Understand the combined effect on two clicks

   On first click, submitForm runs and default action is prevented. On second click, handler does not run due to .once, so no submit occurs.

3. Final Answer:

   The form submits once, default action prevented once -> Option A

4. Quick Check:

   .once runs once + .prevent stops default [OK]

Hint: Once runs handler once; prevent stops default each time [OK]

Common Mistakes:

• Thinking .once allows multiple runs
• Assuming .prevent only works once
• Ignoring combined effect of modifiers

4. You have this Vue code:

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

Clicking the button triggers which handlers?

medium

A. Only outerClick runs; innerClick is stopped

B. Both innerClick and outerClick run

C. Only innerClick runs; outerClick is stopped

D. Neither handler runs

Solution

1. Step 1: Understand .stop on the outer div click

   The .stop modifier on the outer div's click event stops the event from bubbling up beyond the div.

2. Step 2: Trace event when button is clicked

   Clicking the button triggers innerClick. The event bubbles to the div, triggering outerClick, but .stop prevents further bubbling beyond the div.

3. Final Answer:

   Only innerClick runs; outerClick is stopped -> Option C

4. Quick Check:

   .stop stops bubbling beyond element [OK]

Hint: Stop stops bubbling beyond element with modifier [OK]

Common Mistakes:

• Thinking .stop stops inner handler
• Thinking .stop prevents the outer handler from running
• Confusing event bubbling direction

5. You want a button that submits a form only once, prevents default submission, and stops the click event from bubbling. Which Vue event modifiers should you use?

hard

A. @click.prevent.once

B. @click.stop.once

C. @click.stop.prevent

D. @click.once.prevent.stop

Solution

1. Step 1: Identify required modifiers and order

   You need .once to run handler once, .prevent to stop default form submission, and .stop to stop event bubbling. The correct order is event name then modifiers separated by dots.

2. Step 2: Check each option's correctness

   @click.once.prevent.stop uses correct syntax and includes all required modifiers. Other options miss one of the modifiers.

3. Final Answer:

   @click.once.prevent.stop -> Option D

4. Quick Check:

   Correct modifier order: event.once.prevent.stop [OK]

Hint: Use event.once.prevent.stop in that order [OK]

Common Mistakes:

• Changing modifier order incorrectly
• Using invalid modifier syntax
• Forgetting one of the needed modifiers