vue div盒子宽高随另一个盒子自适应

需求：两个盒子的高度不固定，且右侧盒子高度随左侧盒子高度变化。

---

思路：首先弄清楚左侧盒子高度的影响因素，如文章用例是调用接口获取到的数据条数不同导致左侧盒子的高度变化；

解决办法：调用接口获取到数据之后再写获取盒子高度的语句，才能获取到真实的盒子高度。

<div ref="dong"> 左盒子 </div>
<div :style="{ height：rightHeight + 'px' }"> 右盒子 </div>

//接口函数
getData({id：id}).then(res=>{
    if(res.code == 200) {      
        this.$nextTick(()=>{      //获取左侧动态盒子高度，赋值给右侧
            let height = this.$refs.testDiv.offsetHeight;
            this.rightHeight = height ;
        }) 
    }
})

注意点：

        1、自适应盒子的高度写成动态内联样式的形式，且需要带单位：'px'；

        2、this.$nextTick语句要写在接口函数里面（也就是拿到数据之后，写这句），要不然获取不到真实的dom高度；

        3、获取动态盒子高度的方法不一定要用$refs，根据id、class获取也可以。