为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

万千封印 2023-01-06 09:33:45

我有父组件和子组件。父母的数据在 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

                 

            })

}

}


查看完整描述

1 回答

?
德玛西亚99

TA贡献1511条经验 获得超3个赞

在创建的钩子中,将组件实例分配给一个this名为的变量that并在回调中访问它,因为在回调中你在 vue 组件上下文之外(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(); 

            })

}

}


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 4 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信