Vue JS waiting for data before rendering

To prevent the component from rendering before the data have returned you could:

1. add a "isFetching" property to the data and set it to "true"

2. in the fetch callback, set isFetching to "false"

3.add v-if="!isFetching" to the wrapper of the component

You aren't handling Promises properly, so they keep getting unresolved. You can use async, await, although I prefer myself using plain Promise Objects:

getDetails() is another story. You are making a loop, and forEach loop you are sending an axios request. You could have to store each Promise returned by each axios call in an array, to call then Promise.all.

    getDetails: function() {        let url = '/pacientes/request-json/agenda/validarAsistencia/eventos/';        console.log('loading');        let promisedEvents = [];        this.events.forEach(event => {            promisedEvents.push(axios.get(url + event.id))        });        return Promise.all(promisedEvents)    },

After that I would do something like this:

    loadData: function() {        axios.get('/pacientes/request-json/agenda/validarAsistencia/eventos')            .then(res => {                this.events = res.data;                this.getDelayColor() // sync operation; no need to be returned                return this.getDetails(); // Return the promise(s)            })            .then((res) => {                // do something with the response from your array of Promises            })            .then(anotherPromise) // You can also return a promise like this             .catch(handleError) // Very important to handle your error!!        });    },

I am not saying this is the best way to achieve what you may want, but that it is one way to make your code to work. Important here is that you need to learn about Promises.

The Solution:

Thanks you guys !

         loadData: function() {            axios.get('/pacientes/request-json/agenda/validarAsistencia/eventos')                .then(res => {                    this.events = res.data;                    this.getDelayColor() // sync operation; no need to be returned                    this.getConcurrence();                    vm.$nextTick(function () {                        $('[data-toggle="m-tooltip"]').tooltip();                    });                    return this.getDetails(); // Return the promise(s)                })                .then((res) => {                    console.log(res.length);                    for (var i = 0; i < res.length; i++) {                        this.events[i].details = res[i].data;                    }                    this.distributeEvents();                    console.log('end LoadData');                })                .catch(error => {                    console.log('error');                })        },        getDetails: function() {            let url = '/pacientes/request-json/agenda/validarAsistencia/eventos/';            let promisedEvents = [];            this.events.forEach(event => {                promisedEvents.push(axios.get(url + event.id))            });            return Promise.all(promisedEvents)        },