methods Event Handler Methods
Last updated: 2026-10-22
methods Event Handler Methods
The methods option collects component functions used as event handlers and helpers, called by name from templates.
| Group | Options: State |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
data() { return { count: 0 } },
methods: {
add(n) { this.count += n }
}
}⚙️ Arguments
| value | An object of functions; this points to the component instance |
|---|
Returns：No return convention (returns are not auto-tracked)
▶ Example
Edit the code below and see the live result:
Output：
The buttons add 1 and 5 respectively.💡 Key Points
⚠️ Warning Avoid arrow functions — they do not bind this to the instance.
💡 Tip Pass the name without parentheses unless you need arguments.
ℹ️ Note Prefer computed for derived values; keep methods for behaviour.
🏷️ Related State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How do methods and computed split work?
A Cached values → computed; actions and arguments → methods.
Q Why is this sometimes undefined?
A Usually an arrow function or destructuring the method away from the instance.
Q Can one method call another?
A Yes — this.other() shares the instance.
