Javascript 当承诺解析并向嵌套子级传递道具时，如何更新Vue组件

我有父组件和子组件。父对象的数据在ajax调用后填充，我希望将其作为道具传递给子对象

我尝试了不同的解决方案，我将发布两个，但还没有工作：你能帮我指出错误吗

组件确实会对更改做出反应。我还需要确保道具被正确地传递给子级及其嵌套子级

尝试：

• 如果我不使用

  'v-If'

  指令，我将得到

  的一个错误：query

  是 作为null传递

• 因此，我使用

  v-if

  （见下面的版本） 并更新渲染，但它不会做出反应并保持为空（甚至 尽管数据已正确更新）

• 我还尝试将查询数据初始化为计算数据，而不使用 v-if指令，因为毕竟我只需要缓存结果 这是前提

• 我还尝试在总线上发出一个事件，但组件没有 反应

• 最后，我尝试通过使用一个

  ：key

  （例如

  ：key=“ready”

  ），当

  ：键

  改变。但仍然没有效果

模板：

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

---

}

在创建的钩子中，将组件实例

this

分配给一个名为

的变量，该变量
并在回调中访问它，因为在回调中您位于vue组件上下文之外（
this
）：

哦，谢谢@Boussadjra Brahim，我在承诺中混淆了“这个”对象。我在promise中使用了
“console.log（'firstQuery'，this.query）
来检查是否已更新，但我只是在promise.p.s上创建了一个属性。我查看了您的个人资料-您可能希望在组件的git页面（vueye等）添加演示欢迎并感谢您访问我的个人资料，如果您查看组件存储库，您将找到演示
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
                 
            })
}


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