I have a main Vue component which sends data to its child through a prop. However, the data is not immediately available so the child component initializes with undefined values.
Is there a way to delay initialization until the data is ready?
Main Component:
var employeesData = new Vue({
el: '#employees',
data: { ... },
methods: {
fetchData: function(model, args=null) {
let url = "/" + model + ".json"
console.log(url);
$.ajax({
url: url,
success: ((res) => {
console.log(res)
this[model] = res;
this.isLoading = false;
}),
error: (() => {
this.isLoading = false;
}),
complete: (() => {
// $('.loading').hide();
this.isLoading = false;
})
});
},
mounted: function() {
this.fetchData(...)
this.fetchData(...)
this.fetchData('appointments')
}
}
})
The fetchData method gets called multiple times.