Never Use Arrow Functions in Methods Option
Impact: HIGH - Using arrow functions in the methods option causes this to be undefined or the wrong context, leading to runtime errors when trying to access component data, computed properties, or other methods.
Arrow functions lexically bind this from their enclosing scope, not from the object they're defined on. Vue's methods option requires regular functions so Vue can bind this to the component instance.
Task Checklist
- Always use regular function syntax for methods in Options API
- If using ES6 shorthand, use method shorthand (preferred)
- Arrow functions ARE allowed inside methods for callbacks
Incorrect:
export default {
data() {
return { count: 0 }
},
methods: {
// WRONG: Arrow function - `this` will be undefined
increment: () => {
this.count++ // Error: Cannot read property 'count' of undefined
},
// WRONG: Arrow function assigned to property
decrement: () => {
this.count--
}
}
}Correct:
export default {
data() {
return { count: 0 }
},
methods: {
// CORRECT: ES6 method shorthand (preferred)
increment() {
this.count++ // Works! this refers to component instance
},
// CORRECT: Traditional function expression
decrement: function() {
this.count--
},
// Arrow functions ARE fine for callbacks INSIDE methods
fetchData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
this.data = data // Arrow function inherits `this` from fetchData
})
}
}
}