CODEWITHSUNDEEP
vue.jsvuejs2axios
Adam Robertson
Adam Robertson

Reputation: 567

Obviously silly mistake trying to pass a value from an Axios response to data object in Vue

I'm sure this is ridiculously simple, but I'm having trouble passing a response from an Axios request to the data object to use elsewhere. It's currently just returning whatever I set as the default in the data object (in this instance, null). Help please! It's greatly appreciated.

My Vue code:

var thing = new Vue({
    el: '#el',
    data: {
        message: null,
    },
    components: ...
    template: ...
    methods: {
        thing() {
            ...
        }
    },
    created() {
        axios.get('/is-logged')
        .then(response => {
            if(response.data.status == 'error') {
                this.message = response.data.message;
            }
        })
        .catch(e => {
            console.log(e);
        });
    },

    mounted() {
        if (!this.message) {
            console.log(this.message);
            this.thing();
        }
    }
});

The response I get back from is_logged:

{"message":"You are not authorised","status":"error"}

Upvotes: 1

Views: 48

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 220066

You're logging its value before the AJAX request completes (since the component will be mounted before you get the response from the request in created).

Try putting console.log(this.message) at the end of your then callback.

Upvotes: 1

Related Questions