Here is a simplified version of my Vue component:
Vue.component('equipment-tree', {
data(){
return {
tree: [],
}
},
template: `
<template>
<div id="equipment_tree"></div>
</template>`,
mounted: function(){
this.getTreeView()
console.log('4. TREE LOADED AND VISIBLE');;
},
methods: {
setUpTree(){
$("#equipment_tree").jstree("destroy");
$('#equipment_tree').jstree({
core : {
data : this.tree,
multiple: false,
themes: {
dots: true
}
},
});
console.log("2. TREE SET UP")
},
getTreeView(){
fetch("myurl /*just a URL */",
{
method: 'GET',
})
.then((response) => response.json())
.then((data) => {
console.log('1. GOT DATA');
this.tree = JSON.parse(data.tree);
this.setUpTree();
console.log('3. SET UP COMPLETE');
})
}
}
})
After calling the method getTreeView() on mount, I see in the log:
4. TREE LOADED AND VISIBLE
1. GOT DATA
2. TREE SET UP
3. SET UP COMPLETE
I wanted to wait for getTreeView() to finish before logging "TREE LOADED AND VISIBLE" last, so I tried using async/await:
mounted: async function(){
await Promise.resolve(this.getTreeView());
console.log('4. TREE LOADED AND VISIBLE');
}
However, I did not achieve the desired outcome. How can I properly wait for the getTreeView() method to finish executing?
Just to clarify, this example has been simplified for the sake of understanding the process, rather than focusing solely on the order of logs.