Event modifiers (prevent, stop, once) in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the .prevent event modifier do in Vue?

The .prevent modifier calls event.preventDefault() automatically. It stops the default browser action, like preventing a form from submitting or a link from navigating.

beginner

Explain the purpose of the .stop event modifier in Vue.

The .stop modifier calls event.stopPropagation(). It stops the event from bubbling up to parent elements, so only the current element handles it.

beginner

How does the .once event modifier affect event handling in Vue?

The .once modifier makes the event listener run only once. After the first event triggers, Vue automatically removes the listener.

intermediate

Show a Vue template example using .prevent and explain what happens when the event triggers.

<form @submit.prevent="submitForm">
  <button type="submit">Send</button>
</form>

When the button is clicked, the form's default submit action is stopped. Instead, the submitForm method runs without reloading the page.

intermediate

Why would you use .stop and .prevent together in Vue event handling?

Using .stop.prevent stops the event from bubbling up and also prevents the default browser action. This is useful when you want full control over the event on the current element only.

What does the Vue event modifier .once do?

A Stops the event from bubbling up

B Runs the event handler only once and then removes it

C Prevents the default browser action

D Runs the event handler multiple times

.once makes the event listener run only once, then Vue removes it automatically.

Which event modifier prevents the default browser action in Vue?

A .capture

B .once

C .stop

D .prevent

.prevent calls event.preventDefault() to stop default actions like form submission.

If you want to stop an event from bubbling up to parent elements, which modifier do you use?

A .prevent

B .self

C .stop

D .once

.stop calls event.stopPropagation() to stop event bubbling.

What happens if you use @click.prevent.stop on a button?

A The click event is stopped from bubbling and default action is prevented

B The click event bubbles up and default action happens

C The event runs only once

D Nothing happens

Both .prevent and .stop modifiers work together to prevent default action and stop bubbling.

Which modifier would you use to ensure a form does not reload the page on submit?

A .prevent

B .once

C .stop

D .capture

Using .prevent on form submit stops the page reload by preventing the default submit action.

Describe how the Vue event modifiers .prevent, .stop, and .once work and when you might use each.

Think about controlling browser behavior and event flow.

Explain why combining .prevent and .stop modifiers might be useful in a Vue component.

Consider a button inside a form or nested elements.