CODEWITHSUNDEEP
vue.jsvue-chartjs
babak moeinifar
babak moeinifar

Reputation: 37

Vue variables are not set after I get them from api

I have a chart. this is my data:

        data() {
        return {
            title: 'registered users',
            type: 'line',
            users: null,
            labels: null,
            max: '',
        };
    },

I a got my vars:

methods: {
        loadUsers() {
            axios.get('/karma/post-users-chart')
                .then(({data}) => {
                    this.users = data.users;
                    this.labels = data.labels;
                    this.max = data.max;
                })
                .catch((err) => {
                    console.log(err);
                });
        },

    },

and when I assign them or console.log(this.users), they are empty where is my problem??

mounted() {
        this.loadUsers();
console.log(this.users); // it returns null

but in vue pluging in chrome variables are set

Upvotes: 0

Views: 346

Answers (1)

A. L
A. L

Reputation: 12639

mounted is synchronous. loadUsers is doing something asynchronous, but is executing it through a synchronous function. Either turn both of them into an async function and use await or have loadUsers return a promise that's resolved inside the then, which the mounted function then also assigns the value to this.users.

async method

methods: {
        async loadUsers() {
            let { data } = await axios.get('/karma/post-users-chart')
            this.users = data.users
            this.labels = data.labels
            this.max = data.max
        },
    },


async mounted() {
    await this.loadUsers();
    console.log(this.users); // it returns null
}

Upvotes: 1

Related Questions