Vue 'methods' Option
Example
Using a method inside themethods option to toggle a message.
export default { data() { return { msg: 'Hello World!', showMsg: false }; }, methods: { toggleMsg() { this.showMsg = !this.showMsg; } }};Definition and Usage
Themethods option is an object with all the methods that are declared on the Vue instance.
Methods can be called directly (without thethis keyword) from the<template> of a Vue application, like for example when a method is set to run when an event happens, using thev-on directive.
Thethis 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 thethis keyword.
Related Pages
Vue Tutorial:Vue Methods
Vue Tutorial:Vue v-on Directive
