Vue 'methods' Option

❮ Previous Vue Instance Options Reference Next ❯

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


❮ Previous Vue Instance Options Reference Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.