Vue.js Event Handlers

Event listeners can be used with the v-on directive:

v-on

<div id="app">
  <button v-on:click="counter += 1">Increase by 1</button>
  <p>This button has been clicked {{ counter }} times.</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

Typically, we need to use a method to call a JavaScript function.

v-on can receive a defined method to call.

v-on

<div id="app">
   <!-- `greet` is the method name defined below -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // Define methods in the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the current Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})
// You can also call the method directly with JavaScript
app.greet() // -> 'Hello Vue.js!'
</script>

In addition to binding directly to a method, you can also use inline JavaScript statements:

v-on

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

Event Modifiers

Vue.js provides event modifiers for v-on to handle DOM event details, such as event.preventDefault() or event.stopPropagation().

Vue.js uses directive suffixes indicated by a dot . to call modifiers.

• .stop - Stop propagation
• .prevent - Prevent default event
• .capture - Use capture mode
• .self - Only trigger handler if event was dispatched from this element
• .once - Trigger once
• .left - Left button event
• .right - Right button event
• .middle - Middle wheel event

  <!-- Stop click event from propagating -->
  <a v-on:click.stop="doThis"></a>
  <!-- Submit event will no longer reload the page -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- Modifiers can be chained -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- Just the modifier -->
  <form v-on:submit.prevent></form>
  <!-- Add event listener using capture mode -->
  &lt;div v-on:click.capture="doThis">...</div>
  <!-- Only trigger handler if event was dispatched from this element -->
  &lt;div v-on:click.self="doThat">...</div>
  
  <!-- Click event will only be triggered once, added in 2.1.4 -->
  <a v-on:click.once="doThis"></a>
  

Key Modifiers

Vue allows adding key modifiers for v-on when listening to keyboard events:

<!-- Only call vm.submit() when keyCode is 13 -->
&lt;input v-on:keyup.13="submit">

Remembering all keyCodes is difficult, so Vue provides aliases for the most commonly used keys:

<!-- Same as above -->
&lt;input v-on:keyup.enter="submit">
<!-- Shorthand syntax -->
&lt;input @keyup.enter="submit">

Complete list of key aliases:

• .enter
• .tab -.delete (captures "delete" and "backspace" keys)

-.esc

-.space

-.up

-.down

-.left

-.right

-.ctrl

-.alt

-.shift

-.meta

Example

<p><!-- Alt + C -->
&lt;input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
&lt;div @click.ctrl="doSomething">Do something</div>