Tutorials / Vue /

The Vue Button `click` Event

Sep 9, 2021

With Vue, you can tie button clicks to functions you want to execute. The formal way to do this is to use the v-on:click attribute, however, Vue has a neat shortcut, @click.

const app = new Vue({
  data: () => ({counter: 0}),
  template: `
    <div style="border-style:solid">
      <div>Number of button clicks: {{counter}}</div>
      <button @click="incrementCounter">Click Me!</button>
    </div>
  `,
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
});
app.$mount("#content");

Vue's @click also supports modifiers. For example, If you only want a button to be clicked once, instead of creating a boolean variable, you can append .once to the v-on:click or @click.

const app = new Vue({
  data: () => ({counter: 0}),
  template: `
    <div style="border-style:solid">
      <div>Number of button clicks: {{counter}}</div>
      <button @click.once="incrementCounter">Click Me!</button>
    </div>
  `,
  methods: {
    // Will only be called at most once, even if you try to click the button multiple times.
    incrementCounter() {
      this.counter++;
    }
  }
});
app.$mount("#content");

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!

The Vue Button `click` Event

More Vue Tutorials