解决vue父组件异步获取动态数据传递给子组件,子组件无法获取值的问题

责编:menVScode 2018-11-22 14:05 阅读(140)

做项目的时候,遇到在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有获取到数据,在created/mounted里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就已经加载了,并且他绑定的值也是空的。

初始代码

<template>
    <div id="asjLife">
        <div class="rankMain" :is="currentView" :rewardList="rankRewardList"></div>
    </div>
</template>
<script>
export default {
    name:'rankPage',
    components:{orderRank,allOrderRank,cashRank},
    data(){
        return {
            currentView:'order-rank',
            rankRewardList:[]
        }
    },
    computed:{},
    created(){
        this.initMyData()
    },
    methods:{
        initMyData(){
            let self = this
            fetch({
                url:'/activity/orderrank/myData',
                data:{}
	    }).then(res => {
                self.rankRewardList = res.data.myRankRewardList
            })
        }
    }
}
</script>

解决方法:判断传递数据的长度

<div class="rankMain" :is="currentView" :rewardList="rankRewardList" v-if="rankRewardList.length > 0"></div>
标签: vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码