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!

The Vue Button `click` Event

More Vue Tutorials