v-on

v-on

• Shorthand: @

• Expects: Function | Inline Statement

• Argument: event (required)

• Modifiers:

  • .stop - call event.stopPropagation().
  • .prevent - call event.preventDefault().
  • .capture - add event listener in capture mode.
  • .self - only trigger handler if event was dispatched from this element.
  • .{keyCode | keyAlias} - only trigger handler on certain keys.

• Usage:

  Attaches an event listener to the element. The event type is denoted by the argument. The expression can either be a method name or an inline statement, or simply omitted when there are modifiers present.

  When used on a normal element, it listens to native DOM events only. When used on a custom element component, it also listens to custom events emitted on that child component.

  When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special $event property: v-on:click="handle('ok', $event)".

  1.0.11+ When listening the custom events, inline statements have access to the special $arguments property, which is an array of the additional arguments passed to the child components’ $emit call.

• Example:

  <!-- method handler -->
  <button v-on:click="doThis"></button>
  
  <!-- inline statement -->
  <button v-on:click="doThat('hello', $event)"></button>
  
  <!-- shorthand -->
  <button @click="doThis"></button>
  
  <!-- stop propagation -->
  <button @click.stop="doThis"></button>
  
  <!-- prevent default -->
  <button @click.prevent="doThis"></button>
  
  <!-- prevent default without expression -->
  <form @submit.prevent></form>
  
  <!-- chain modifiers -->
  <button @click.stop.prevent="doThis"></button>
  
  <!-- key modifier using keyAlias -->
  <input @keyup.enter="onEnter">
  
  <!-- key modifier using keyCode -->
  <input @keyup.13="onEnter">

  Listening to custom events on a child component (the handler is called when “my-event” is emitted on the child):

  <my-component @my-event="handleThis"></my-component>
  
  <!-- inline statement -->
  <my-component @my-event="handleThis(123, $arguments)"></my-component>

• See also: Methods and Event Handling