后台api数据 页面加载问题

一个页面，我通过onLoad页面生命函数通过api接口在后端加载数据，但是不能在页面中正常加载显示，试过用计算属性和侦听器监听data数据，但是还是不能正常加载显示，代码如下，困扰N天了，请大大后看看，给做解决思路，谢谢！

<template>

<view class="uni-tab-bar">

<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">

<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="tab.id"

data-current="index" @click="tapTab">{{tab.name}}</view> </scroll-view>
<swiper :current="cateid" class="swiper-box" @change="changeTab" :style="{height:tabHeight+'px'}">
<swiper-item v-for="(v,k) in contents" :key="k">
<view class="" v-if="v.length>0">
<view class="" v-for="(v1,k1) in v" :key="k1">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="goDetail(v1.id)">
<view class="uni-triplex-row">
<view style="width: 25%;">
<view class="uni-flex uni-row">
<view class="grace-center answered" style="margin-right:20upx;">
<view class="uni-text">浏览</view>
<view>{{v1.views}}</view>
</view>
<view class="grace-center answered">
<view class="uni-text">回复</view>
<view>{{v1.comments}}</view>
</view>
</view>
</view>
<view style="width: 75%;margin-left: 10upx;">
<text class="uni-title">{{v1.title}}</text>
<text class="uni-h5" style="margin-left: 10upx;">发布于:{{v1.create_date}}</text>
</view>
</view>
</view>
</view>
</view>
<view v-else>
<view style="width: 100%;height: 100%;text-align: center;padding: 50% 0;">
<i class="aliiconfont" style="color: #808080;font-size: 140upx;">&#xe652;</i>
<view class="">此问题分类下，暂无数据！</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>

<script>
export default {
name:'answers-view',
data() {
return {
scrollLeft: 0,
tabBars:[],
contents:[],
cateid:0,
tabIndex:0,
tabHeight:500,
bflag:true,
cid:[]
};
},
onLoad(option) {
let that = this;
let cid = option.cid;
cid = cid.split(",");
cid = cid.filter(function(n){return n});
that.cid = cid;
that.getCateList()

    },  
    onReady() {  
        let that = this;  
        //获取屏幕高度及比例  
    var winInfo = uni.getSystemInfo({  
        success: function (res) {  
            var windowHeight = res.windowHeight;  
            //获取头部标题高度  
            var dom = uni.createSelectorQuery().select('#tab-bar')  
            dom.fields({size: true}, res2 => {  
                if(!res2){return ;}  
                //计算得出滚动区域的高度  
                that.tabHeight = windowHeight - res2.height;  
            }).exec();  
        }  
    });  
    },  
    onShow() {  
    },  
    methods:{  
    getCateList() {  
            let that = this;  
            for(let i =0,len=(that.cid).length;i<len;i++){  
                 uni.request({  
                    url:that.baseUrl+'/addons/cms/wxapp.archives/getChannelArchives',  
                    data:{  
                        pid:(that.cid)[i]  
                    },  
                    success(res) {  
                        that.contents[i] = res.data.data[0];  
                        that.tabBars[i] = res.data.data[1];  
                    }  
                })  
            }  
        },  
        loadact(e){  
            this.tabIndex = e;  
            this.cateid = e;  
            this.bflag = false  
        },  
        changeTab(e){  
            this.tabIndex = e.detail.current;  
            this.cateid = e.detail.current;  
        },  
        tapTab(e){  
            this.tabIndex = e.currentTarget.dataset.current;  
            this.cateid = e.currentTarget.dataset.current;  
        },  
        loadMore(e) {  
            console.log(e);  
        },  
        goDetail(e){  
            uni.navigateTo({  
                url:'../ask-view/ask-view?id='+e  
            })  
        }  
    }  
}  

</script>

<style>
/ #ifdef MP-ALIPAY /
.swiper-tab-list {
display: inline-block;
}
/ #endif /
.answered {
width: 40px;
height: 40px;
color: #017E66;
background: rgba(1,126,102,0.08);
border: 1px solid rgba(1,126,102,0.16);
border-radius: 3px;
padding-bottom: 7px;
}

</style>