Event modifiers (prevent, stop, once) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when clicking the button with @click.prevent?

Consider this Vue component snippet:

<button @click.prevent="increment">Click me</button>

methods: {
  increment() {
    console.log('Clicked!')
  }
}

What is the effect of the .prevent modifier here?

A The click event's default action is prevented, but the increment method still runs logging 'Clicked!'.

B The click event is stopped from propagating to parent elements, but the increment method does not run.

C The increment method runs only once and then the button disables itself.

D The click event triggers normally without any prevention or stopping.

💡 Hint

Think about what .prevent does to the event's default behavior.

The .prevent modifier calls event.preventDefault(), stopping the default browser action (like following a link). It does not stop the event from running the method or propagating.

❓ component_behavior

intermediate

What is the effect of @click.stop on nested elements?

Given this Vue template:

<div @click="outer">
  <button @click.stop="inner">Click me</button>
</div>

methods: {
  outer() { console.log('Outer clicked') },
  inner() { console.log('Inner clicked') }
}

What happens when the button is clicked?

A Both 'Inner clicked' and 'Outer clicked' are logged because .stop does not affect propagation.

B Only 'Inner clicked' is logged because .stop prevents the event from reaching the div.

C Only 'Outer clicked' is logged because .stop disables the button's click handler.

D Neither message is logged because the event is stopped before handlers run.

💡 Hint

Remember what event.stopPropagation() does.

The .stop modifier calls event.stopPropagation(), which prevents the event from bubbling up to parent elements. So only the button's handler runs.

❓ state_output

advanced

How many times does the method run with @click.once?

Look at this Vue component snippet:

<button @click.once="count++">Click me</button>

setup() {
  const count = ref(0)
  return { count }
}

If the user clicks the button 5 times, what is the final value of count?

A 5

B 0

C It causes an error because .once is not valid here.

D 1

💡 Hint

Think about what .once does to event listeners.

The .once modifier makes the event listener run only once. After the first click, it is removed, so further clicks do not increment count.

📝 Syntax

advanced

Which option correctly uses multiple event modifiers on a click?

You want to prevent the default action and stop propagation on a button click in Vue. Which syntax is correct?

A <button @click.stop.prevent="handleClick">Click</button>

B <button @click.preventOnce.stop="handleClick">Click</button>

C <button @click.prevent.stop="handleClick">Click</button>

D <button @click.once.prevent.stop="handleClick">Click</button>

💡 Hint

Check the official Vue event modifier order and syntax.

Vue supports chaining modifiers like .prevent.stop. The order matters: .prevent then .stop is valid. .once must be alone or last. .preventOnce is invalid.

🔧 Debug

expert

Why does the @click.once handler not run more than once?

Given this Vue code:

<button @click.once="increment">Click</button>

setup() {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
}

After clicking the button multiple times, count only increases once. Why?

A The .once modifier removes the event listener after the first click, so increment runs only once.

B The count variable is reset after each click, so it never increases beyond 1.

C The increment function has a bug preventing multiple increments.

D Vue caches the event handler and ignores repeated clicks automatically.

💡 Hint

Recall what .once does to event listeners in Vue.

The .once modifier tells Vue to remove the event listener after it runs once. This means the increment function is called only on the first click.

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