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!