Arrow method on Vue instance¶
ID: js/vue/arrow-method-on-vue-instance
Kind: problem
Security severity:
Severity: warning
Precision: high
Tags:
- reliability
- frameworks/vue
Query suites:
- javascript-security-and-quality.qls
Click to see the query in the CodeQL repository
The Vue framework invokes the methods of a Vue instance with the instance as the receiver. It is however impossible to perform this binding of instance and receiver for arrow functions, so the this variable in an arrow function on a Vue instance may not have the value that the programmer expects.
Recommendation¶
Ensure that the methods on a Vue instance can have their receiver bound to the instance.
Example¶
The following example shows two similar Vue instances, the only difference is how the created life cycle hook callback is defined. The first Vue instance uses an arrow function as the callback. This means that the this variable will have the global object as its value, causing this.myProperty to evaluate to undefined, which may not be intended. Instead, the second Vue instance uses an ordinary function as the callback, causing this.myProperty to evaluate to 42.
new Vue({
data: {
myProperty: 42
},
created: () => {
// BAD: prints: "myProperty is: undefined"
console.log('myProperty is: ' + this.myProperty);
}
});
new Vue({
data: {
myProperty: 42
},
created: function () {
// GOOD: prints: "myProperty is: 1"
console.log('myProperty is: ' + this.myProperty);
}
});
References¶
Vue documentation: The Vue Instance