I've been grappling with a VueJS data rendering issue for a few weeks now.
My approach involves making axios calls, some nested within others. The problem I'm facing is that the data renders before the calls have completed, resulting in an empty view.
I've looked into using "await" and asynchronous calls in my code, but nothing seems to be resolving the issue.
I also came across a similar question on Stack Overflow: Get component to wait for asynchronous data before rendering Unfortunately, even that solution doesn't seem to work for me.
Here is a snippet of my code:
<template>
<div class="m-portlet m-portlet--full-height" m-portlet="true" id="m_portlet_validate_agenda">
...
<div class="m-portlet__body">
<div class="tab-content">
<div class="tab-pane active" id="m_widget2_tab1_diagnose">
<div class="m-widget2">
<div v-for="diagnose in diagnoses" v-if="diagnoses.length" :class="'m-widget2__item m-widget2__item--' + diagnose.delayColor[0]">
<div class="m-widget2__checkbox" >
<label class="m-checkbox m-checkbox--solid m-checkbox--single m-checkbox--brand">
<span class="m--bg-white" v-html="diagnose.concurrence"></span>
</label>
</div>
<div class="m-widget2__agenda col-2">
{{ diagnose.started_at | moment("HH:mm A") }}
</div>
<div class="m-widget2__desc" v-if="!isFetching">
<div>
<span class="m-widget2__text">
</span><br>
<span class="m-widget2__user-name">
<a href="#" class="m-widget2__link m-link">
Patient:
{{ diagnose.details[0].name }}
</a><br>
<a href="#" class="m-widget2__link m-link">
Attending Physician:
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
events: [],
diagnoses: [],
urgencies: [],
treatments: [],
isFetching: true
}
},
mounted() {
this.loadData();
},
methods: {
loadData: async function() {
await axios.get('/patients/request-json/agenda/validateAttendance/events').then(res => {
this.events = res.data;
this.diagnoses = [];
this.urgencies = [];
this.treatments = [];
this.getDetails();
this.getDelayColor();
this.getConcurrence();
vm.$nextTick(function () {
$('[data-toggle="m-tooltip"]').tooltip();
});
console.log('end LoadData');
});
},
getDetails: function() {
console.log('loading');
this.events.forEach(event => {
axios.get('/patients/request-json/agenda/validateAttendance/events/' + event.id).then(res => {
event.details = res.data;
console.log(res.data);
});
});
this.distributeEvents();
console.log('mounted');
},
distributeEvents: function() {
this.events.forEach(event => {
if ( event.event.event_type == "diagnosis" )
{
this.diagnoses.push(event);
}
else if ( event.event.event_type == "urgency" )
{
this.urgencies.push(event);
}
else if ( event.event.event_type == "treatment" )
{
this.treatments.push(event);
}
});
this.isFetching = false;
},
getDelayColor: function() {
this.events.forEach(event => {
do something...
});
},
getConcurrence: function() {
this.events.forEach(event => {
do something...
});
},
diffMinutes: function(started_at) {
do something...
}
}
}