Vue 'methods' Option
Example
Using a method inside the methods
option to toggle a message.
export default {
data() {
return {
msg: 'Hello World!',
showMsg: false
};
},
methods: {
toggleMsg() {
this.showMsg = !this.showMsg;
}
}
};
Run Example »
Definition and Usage
The methods
option is an object with all the methods that are declared on the Vue instance.
Methods can be called directly (without the this
keyword) from the <template>
of a Vue application, like for example when a method is set to run when an event happens, using the v-on
directive.
The this
keyword must be used to call a method from within the Vue instance, like when a method is called by another method for example.
Note: Arrow functions should be avoided when declaring methods because the Vue instance cannot be reached from inside such a function using the this
keyword.
Related Pages
Vue Tutorial: Vue Methods
Vue Tutorial: Vue v-on Directive