I have several dropdownlists on a web page that retrieve their contents via api call to the server, which are all very quick, and an additional call that retrieves 1000 rows from the database - considerably longer response time. I have this Javascript/Vue code that runs when everything is loaded and ready to go:
setOrderStatuses: async function () {
...
},
setSpecialOrders: async function () {
...
},
setSubmitterNames: async function () {
...
},
...
mounted: function () {
this.$nextTick(async function () {
return await Promise.all([
this.setOrderStatuses(),
this.setSpecialOrders(),
this.setSubmitterNames()
]);
});
},
...wherein everything retrieves data as expected, but the UI doesn't update until all of the promises are fulfilled. If I put a breakpoint on the server that blocks the answer to setOrderStatuses(), for instance, neither of the other methods update the UI until I click continue and the promise is filled.
jus make your mouted method async like :
async mounted () {
await this.setOrderStatuses()
await this.setSpecialOrders()
await this.setSubmitterNames()
}