Vue 2.0: Passing asynchronous data to child component
You can just use v-if
in your parent template:
<template v-if="everthingIsReady"> <child-item :data="data"></child-item></template>
Child Item won't be created until everythingIsReady
is set to true
and you can set it right after all your calls complete.
Use Promise.all.
In the code below, I modified your fetch
method to return the promise from the ajax call. We can then collect those promises in an array and pass them to Promise.all
and do something when all of the ajax calls have completed. In this case, set the isLoading
property so that you can use v-if
on your child component.
var employees = new Vue({ el: '#employees', data: { isLoading: true }, methods: { fetch(model, args=null) { let url = "/" + model + ".json" const success = res => this[model] = res const error = err => console.log(err) return $.ajax({url, success, error}) } }, mounted(){ let promises = [] promises.push(this.fetch('stuff')) promises.push(this.fetch('otherstuff')) promises.push(this.fetch('appointments')) Promise.all(promises) .then(() => this.isLoading = false) .catch(err => console.log(err)) }})