Vue.js Event Handling

When we want to listen to DOM events we can use the v-on directive and then execute some JavaScript instruction or expression when they are triggered.

For example:

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button was clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Method Event Handlers

Sometimes, the logic to be implemented can be very complex and so we may not be able to place our JavaScript in a v-on attribute. Hence, the v-on accepts the name of a method we would like to call. For instance:

<div id="example-2">
  <!-- `greets` is the name of a method that is defined below -->
  <button v-on:click="greet">Greets</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // defines the method under the `methods` object
  methods: {
    greets: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// methods can also be invoked in JavaScript as well
example2.greet() // => 'Hello Vue.js!'

Methods in Inline Handlers

We can use method in an inline JavaScript statement instead of binding directly to a method name:

<div id="example-3">
  <button v-on:click="reply('hi')">Say hi</button>
  <button v-on:click="reply('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    reply: function (message) {
      alert(message)
    }
  }
})

Event Modifiers

To modify normal event we make a call to event.preventDefault() or event.stopPropagation() inside event handlers. It is always better to have your methods deal purely with data logic instead of having to deal with DOM event details. Vue provides us with some event modifiers for the v-on.

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

<!-Here the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-In this case the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-chaining modifiers-->
<a v-on:click.stop.prevent="doThat"></a>

<!-- the modifier alone -->
<form v-on:submit.prevent></form>

<!-using capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is always handled here before being handled by that element -->
<span v-on:click.capture="doThis">...</span>

<!-You should only trigger handler if event.target is the element itself -->
<span v-on:click.self="doThat">...</span>

Version 2.1.4+ provided us with the .once:

<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>

Version 2.3.0+ provides a .passive modifier which corresponds to addEventListener's passive option.

<!-- the scroll event's default behavior will happen -->
<!-- immediately, instead of waiting for `onScroll` to be completed  -->
<!-- whenever it contains `event.preventDefault()` -->
<span v-on:scroll.passive="onScroll">...</span>

Key Modifiers

When we need to listen to events on specific keys, we can use the v-on directive:

<!-- call `vm.submit()`only when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

Key Codes

It is also permitted to use keyCode in Vue:

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

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

System Modifier Keys

The modifiers below can be used to trigger mouse or keyboard event listeners:

• .ctrl
• .alt
• .shift
• .meta

.exact Modifier

This became available in Vue 2.5.0+ and allows control of the exact combination of system. modifiers need to trigger an event.

<!-- this fires even if Alt or Shift is also pressed -->
<button @click.ctrl="onClick">A</button>

<!-- this only fires when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>


<!-this only fires when no system modifiers are pressed -->
<button @click.exact="onClick">A</button>

Mouse Button Modifiers

These were added in version 2.2.0+ and they restrict the handler to events triggered by a specific mouse button.

• .left
• .right
• .middle

Why Listeners in HTML?

Wait a minute why bother to add event listeners in HTML? The benefits of event handlers in HTML are:

1. It's easier to locate the handler function implementations within your JS code by skimming the HTML template.
2. Since you don't have to manually attach event listeners in JS, your ViewModel code can also be pure logic and DOM-free. This makes it easier to be tested.
3. Whenever a ViewModel is destroyed, all the event listeners are automatically removed. You don't need to worry about cleaning it up yourself.

Previous: Vue.js List Rendering
Next: Vue.js Component Registration: Global and Local Techniques