Vue request can't get component data

Question

I am trying to disable loading when the HTTP request returns an error, but it gives me this error.

Uncaught (in promise) TypeError: Cannot set property 'loading' of undefined

Code

    export default {
        name: 'login',
        data() {
            return {
                loading: false, //can't be set to false on request error
            }
        },
        methods: {
            login: function () {
                this.loading = true;
                const { username, password } = this
                this.$store.dispatch('login', { username, password }).then((resp) => {
                    setTimeout(() => {
                        this.loading = false;
                    }, 5000);
                    // this.$router.push({name: 'dashboard'})
                }).catch(function (error) {
                    this.loading = false; // Uncaught (in promise) TypeError: Cannot set property 'loading' of undefined
                    console.log('error', error);
                });
            }
        }
    }

Any idea?

Does this answer your question? How to access the correct `this` inside a callback? — Phil
– Phil, Commented Jul 2, 2020 at 4:27

Niklesh Raut · Accepted Answer · 2020-07-02 04:22:21Z

2

this represent to the object that called the function in catch method, not to the current vue component.

so either you can use var vm=this outside and use after like below.

  login: function () {
        this.loading = true;
        var vm = this;
        .....
        .....
        }).catch(function (error) {
            vm.loading = false;
            console.log('error', error);
        });
    }

Or use arrow method

  login: function () {
        .....
        .....
        }).catch((error) => {
            this.loading = false;
            console.log('error', error);
        });
    }

You already used arrow method with setTimeout in below code, so I guess you aware of this, just use this to fix this also

setTimeout(() => {
    this.loading = false;
}, 5000);

edited Jul 2, 2020 at 4:22

answered Jul 2, 2020 at 4:16

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue request can't get component data

Code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related