Reputation: 428
I am trying out vuejs, and I have a very simple app:
const app = new Vue({
el: '#app', // 1
data: { // 2
myLocalProperty: 'Im a local property value' // 3
},
methods: {
buttonClicked() { // 2
const newText = 'The new value is: ' + Math.floor( Math.random() * 100);
this.myLocalProperty = newText; // 4
}
}
});
This I call buttonClicked from a button, this works just fine. However, if I declare buttonClicked() with an arrow function, it doesn't work. Why?
buttonClicked: () => {
const newText = "The new value is" + Math.floor(Math.random() * 100);
this.myLocalProperty = newText;
}
Upvotes: 0
Views: 42
Reputation: 722
If you use an arrow function this
will no longer reference the Vue instance. You need to use the function
keyword here:
buttonClicked: function() {
const newText = "The new value is" + Math.floor(Math.random() * 100);
this.myLocalProperty = newText;
}
Upvotes: 1