CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
moses toh
moses toh

Reputation: 13192

How can I implement arrow function in VueJS?

My method in vue looks like this :

methods: { 
    setDate: async function () {
        console.log(this.modal)
    }
}

I want to change it to an arrow function. I tried like this :

methods: { 
    setDate: async () => {
        console.log(this.modal)
    }
}

There exist error like this :

Cannot read property 'modal' of undefined

How can I solve this problem?

Upvotes: 1

Views: 2296

Answers (3)

haMzox
haMzox

Reputation: 2109

You are facing this error because an arrow function wouldn't bind this to the vue instance for which you are defining the method. The same would happen if you were to define computed properties using an arrow function.

Don’t use arrow functions on an instance property or callback e.g.

vm.$watch('a', newVal => this.myMethod())

As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.

You can read about it here.

Upvotes: 1

Vibha Chosla
Vibha Chosla

Reputation: 713

use function directly like 

methods: { 
    async setDate() {
        console.log(this.modal)
    }
}

Upvotes: 1

RickL
RickL

Reputation: 2821

This link https://michaelnthiessen.com/this-is-undefined/ says the following:

"An arrow function uses what is called lexical scoping. We'll get into this more in a bit, but it basically means that the arrow function takes this from it's context.

If you try to access this from inside of an arrow function that's on a Vue component, you'll get an error because this doesn't exist!

So in short, try to avoid using arrow functions on Vue components. It will save you a lot of headaches and confusion."

Upvotes: 0

Related Questions