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.


More Vue Tutorials