Suggest an edit

Improve this article

Refine the answer for “What does the methods object contain?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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

```js
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:

```js
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>
```

```js
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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts253 words

For the reviewer

Visible only to the moderator. Helps review go faster.