az2902
az2902

Reputation: 428

Why does calling a method that is an arrow function not work?

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

Answers (1)

andypotato
andypotato

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

Related Questions