Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs click

Related course:
Fullstack Vue: The Complete Guide to Vue.js

Button clicks can be caught using the v-on:click event. This event calls a function inside your app.
You can link Vue directly with action in your template.

click example

To deal with button clicks, we need to edit both a template and the Vue instance.
For simplicity, I only show the app section. Of course you still have to include the Vue framework and app.js.

In your template, create a button and define the v-on:click event.

<div id="app">
{{ x }}
<button v-on:click="clicked">Click me</button>

Inside your app.js, define the clicked function. This function needs to be defined in the methods section. We let it set a local variable x that we display in the template.

new Vue({
el: '#app',
data: {
x: ""
methods: {
clicked: function() {
this.x = 'clicked';

← Vue.js Events vuejs checkbox →


© vuejsexamples.net - Privacy Policy - Cookie Policy