Handling Click Events with Vue

Jul 8, 2020

Vue's v-on directive is how you handle events in Vue. The v-on:click directive lets you attach a click event handler to an element. For example, the below Vue app updates every time you click the "Add" button.

// Click the "Add" button twice to make the <h1> show
// "Row row row your boat"
const app = new Vue({
  data: () => ({ message: 'Row' }),
  template: `
  <div>
    <h1>{{message}} your boat</h1>
    <button v-on:click="message += ' row'">Add</button>
  </div>
  `
});

Below is a live example:

If v-on:click is too verbose for you, Vue also supports @click, which is a convenient shorthand.

const app = new Vue({
  data: () => ({ message: 'Row' }),
  // `@click` is the same thing as `v-on:click`
  template: `
    <div>
      <h1>{{message}} your boat</h1>
      <button @click="message += ' row'">Add</button>
    </div>
  `
});

Methods and $event

Vue executes the expression in v-on:click with a couple additional features. First, Vue injects a $event variable that your v-on:click code can use. $event is a reference to the vanilla DOM event.

const app = new Vue({
  data: () => ({}),
  methods: {
    myMethod: function myMethod(ev) {
      console.log(ev); // MouseEvent { ... }
    }
  },
  template: `
    <div>
      <button v-on:click="myMethod($event)">Click Me</button>
    </div>
  `
});

Second, if your expression evaluates to a function, Vue will execute that function and automatically pass $event as the first parameter. For example, the below code is equivalent to the above, because, since myMethod is a function, Vue will call it and pass $event.

const app = new Vue({
  data: () => ({}),
  methods: {
    myMethod: function myMethod(ev) {
      console.log(ev); // MouseEvent { ... }
    }
  },
  template: `
    <div>
      <button v-on:click="myMethod">Click Me</button>
    </div>
  `
});

Common Modifiers

There are several common tasks when working with click handlers. For example, you may want to call preventDefault() to prevent redirecting the user when they click on an a tag, or ignore click events on child elements. Vue's event modifiers can handle these tasks, and some other common tasks, for you.

For example, v-on:click.prevent automatically calls $event.preventDefault() for you. So the below app will have an <a> tag that does not redirect the user when clicked.

const app = new Vue({
  data: () => ({}),
  methods: {
    myMethod: function myMethod(ev) {
      console.log(ev); // MouseEvent { ... }
    }
  },
  template: `
    <div>
      <a v-on:click.prevent="myMethod($event)" href="/">Click Me</a>
    </div>
  `
});

.prevent is a modifier for v-on:click. Another handy modifier is .self, which tells Vue to only evaluate v-on:click if the element itself is clicked, as opposed to one of its children.

For example, Vue only calls the below v-on:click handler when you click on the outer div, not the inner div.

const app = new Vue({
  data: () => ({}),
  methods: {
    alert: function() {
      alert('Clicked Outer');
    }
  },
  template: `
    <div>
      <div class="outer" v-on:click.self="alert()">
        Outer
        <div class="inner">Inner</div>
      </div>
    </div>
  `
});

Below is a live example.


Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!