Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs click

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

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>
</div>

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';
}
}
});

Download Vue.js Examples


← Vue.js Events vuejs checkbox →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy