如何在承诺解析并将道具传递给嵌套子项时更新 Vue 组件

Question

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

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

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

尝试：

• 如果我不使用'v-if'指令，我将得到一个错误，因为:query它作为 null 传递。

• 所以我使用v-if（见下面的版本）并更新渲染，但它没有反应并保持为空（即使数据已正确更新）。

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

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

• 最后，我尝试通过使用 :key（例如:key="ready"）使组件具有反应性，它应该在更改时使组件具有反应性:key。但是还是没有效果。

模板：

<template>

  <div v-if="isLoaded()">

      <input>

      <metroline></metroline>

      <grid :query="query"></grid>

  </div>

</template>

脚本：

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

                 

            })

}

}

Answer 1

在创建的钩子中，将组件实例分配给一个this名为的变量that并在回调中访问它，因为在回调中你在 vue 组件上下文之外（this）：created() {&nbsp; var vm = self;&nbsp; var that=this;&nbsp; this.firstQuery(...)&nbsp; &nbsp; &nbsp; .then(function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;that.query = data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log('firstQuery', this.query);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;that.ready = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;self.isLoaded();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}}