What does the methods object contain?

VueJunior~1 min read

The methods object in Vue (in the Options API) holds plain functions that become the component's methods and are available:

in the template (template)
via this inside the component
in event handlers (v-on)
in the component's internal computations

In simple terms:

methods contains functions you can call from the template or the component's code.

Example of a methods object

export default {
  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    },
    reset() {
      this.count = 0
    }
  }
}

In the template:

html

<button @click="increment">+</button>
<button @click="reset">Reset</button>

What's important to know about methods

1. Methods are plain functions

They are NOT cached, unlike computed. They run every time they are called in the template.

2. Methods have access to `this`

That is:

this.count
this.dataProperty
this.someComputed
this.someMethod()

Example:

methods: {
  sayHello() {
    console.log("Hello", this.name)
  }
}

3. Methods are used in event handlers

html

<button @click="logout">Logout</button>

4. Methods can take arguments

html

<button @click="add(5)">+5</button>

methods: {
  add(n) {
    this.count += n
  }
}

5. Methods are NOT a substitute for computations (use computed)

If a function computes a value based on reactive data:

computed is better
method is worse (because it is not cached)

6. Methods are only available in the Options API

In the Composition API, plain functions in setup() are used instead.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.