uniapp小程序 计算出渲染所需数据后，界面已经渲染完毕数据不更新 情景解决

---

一、问题描述

有一个界面，是一个别的界面跳转过来的界面，在这里，我正常在onload函数里，跟后端获取数据，然后！问题来了！我这个界面里有一个手风琴组件，自己写的那种，然后需要在拿到数据之后，计算这个数据里面的一个列表的高度，但等我算完了这个高度，界面已经渲染完了，然后这个组件就没得高度就显示不出来数据。

感觉我这个问题和那种，“当页面数据被修改时，视图却未重新渲染”的问题还不一样，我试了很多方法，比如this.$forceUpdate()强制渲染，给view加显示限定条件v-if都不行。

this.$set()好像也不行，就是死活不更新。

然后，我想到一个妙计，看代码。

二、代码

这里只保留了关键代码，灵魂就在那个watch监听。因为我就是需要拿到这个content数据，之后再计算高度，所以我就监听，只要content改变了我就计算高度，竟然好用了，感觉是不是还是把计算高度和获取数据分开写会好些（之前都是写在一起的，获取完数据直接计算高度那种，都不行

export default {
  data() {
    return {
        attendantListHeight:0,
        missListHeight:0,
        content:null,
    };
  },
  watch: {
    content:function(){//一旦获取到新的数据（数据发生改变），就自动计算高度
        this.$nextTick(function(){
            this.getHeight();
        })
    }
  },
  methods: {
    async getClassAttendanceDetailData(param){
        await getClassAttendanceDetail({ ...param }).then(res=>{
            this.content=res;
        })
    },
    getHeight(){
        this.getRect(this, '.sub-box').then(res => {
            var elLength=this.content.arrive.length;
            this.attendantListHeight = (parseInt(res.height)* elLength).toString() + 'px';
        })
        this.getRect(this, '.sub-box-1').then(res => {
            var elLength=this.content.absent.length;
            this.missListHeight = (parseInt(res.height)* elLength).toString() + 'px';
        })
    }
  },
  onLoad(options){
    let obj = JSON.parse(decodeURIComponent(options.obj));
    this.config=obj;
    this.getClassAttendanceDetailData(obj);
  },
};