Vue 2.0: Passing asynchronous data to child component

Viewed 8083

I have a parent Vue component that passes data to its child through a prop, but the data is available asynchronously and so my child component initializes with undefined values.

What can I do to prevent initialization until the data is available?

Parent:

  var employees = new Vue({
    el: '#employees',
    data: { ... },
    methods: {
      fetch: 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.fetch(...)
      this.fetch(...)
      this.fetch('appointments')
    }
  })

My fetch method is called multiple times.

2 Answers
Related