How to update Vue component when promise resolve AND passing props to nested children

Question

I have parent and child components. Parent's data is populated after an ajax call, that I want to pass to child as a props.

I tried different solutions, I will post two, but not yet working : could you please pin-point the error?

The component does react to changes. I also need to ensure that props are correctly passed to child and its nested children.

Attempts:

If I don't use 'v-if' directive, I will get an error for :query is passed through as null.
So I use v-if (see version below) and update the rendering, but it does not react and stay empty (even though data is properly updated).
I also tried to initialize the query data as computed without using the v-if directive, because after all I just need to cache the result of the premise.
I also tried to emit an event on a bus, but the component does not react.
Finally I tried to make the component reactive by making use of a :key (e.g. :key="ready") that should make the component reactive when the :key changes. But still no effect.

Template:

<template>
  <div v-if="isLoaded()">
      <input>
      <metroline></metroline>
      <grid :query="query"></grid>
  </div>
</template>

script:

export default {

data() {
  return {
    ready : false,
    query : null
  }
},
components : {
  metroline : Metroline,
  grid : Grid
},
methods: {

    isLoaded() {
      return this.ready
    },

    firstQuery( uid, limit, offset) {

      var url = // my url
      
      // using Jquery to handle cross origin issues, solving with jsonp callback...
      
      return $.ajax({
        url : url,
        dataType: 'jsonp',
        jsonpCallback: 'callback',
        crossDomain: true 
        
        })

    }

},
created() {
  var vm = self;

  this.firstQuery(...)
      .then(function(data){
                 this.query = data;
                 console.log('firstQuery', this.query);

                 // attempts to pass through the query
                 // bus.$emit('add-query', this.query);

                 this.ready = true;
                 self.isLoaded(); // using a self variable, temporarily, jquery deferred messed up with this; however the this.query of vue instance is properly updated
                 
            })
}

}

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2020-08-12T20:13:58

In created hook assign the component instance this to a a variable called that and access it inside the callback because in the callback you're outside the vue component context (this):


created() {
  var vm = self;
  var that=this;
  this.firstQuery(...)
      .then(function(data){
                 that.query = data;
                 console.log('firstQuery', this.query);

              

                 that.ready = true;
                 self.isLoaded(); 
            })
}
}

How to update Vue component when promise resolve AND passing props to nested children

1 Answers