Vue 2.0: Passing asynchronous data to child component Vue 2.0: Passing asynchronous data to child component vue.js vue.js

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))  }})