Questions And Answers

More Tutorials

VueJs Modifiers


There are some frequently used operations like event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.


Event Modifiers

Vue provides event modifiers for v-on by calling directive postfixes denoted by a dot.

• .stop
• .prevent
• .capture
• .self
• .once

For examples:

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

Key Modifiers

When listening for keyboard events, we often need to check for common key codes. Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys:
• .enter
• .tab
• .delete (captures both “Delete” and “Backspace” keys)
• .esc
• .space
• .up
• .down
• .left
• .right

For examples:

<input v-on:keyup.enter="submit">

Input Modifiers

• .trim
If you want user input to be trimmed automatically, you can add the trim modifier to your v-model
managed inputs:
<input v-model.trim="msg">

• .number
If you want user input to be automatically typecast as a number, you can do as follow:
<input v-model.number="age" type="number">

• .lazy
Generally, v-model syncs the input with the data after each input event, but you can add the lazy modifier to instead sync after change events:
<input v-model.lazy="msg" >


In this page (written and validated by ) you learned about VueJs Modifiers . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs Plugins.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.