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!