Vue.js 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>