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.