记录一下自己遇到的问题
item.orderMeters.forEach((item2, index2) => {
setTimeout(() => {
// 循环判断是否需要添加展开收起按钮,对比DOM宽度
// order+itgem2.id是通过v-for动态赋予ref
var orderRef = this.$refs["orderBox" + item2.id][0];
console.log("orderRef", orderRef);
console.log("获取盒子宽度", orderRef.clientWidth);
console.log("获取盒子宽度222", orderRef.scrollWidth);
}, 400);
});
循环一个数组 即使在mounted操作,orderRef.clientWidth 和 orderRef.scrollWidth都会等于0
因为元素的实例化是在这个生命周期的mounted之后,所以你可以实际得到它的长度。但方法的执行于mounted。那么实际上你得到了0。
而且它也受到动画因素的影响,这一次是关于.3s的,所以Vue.nextTick
不会工作,使用setTimeout(()=>{}, 400)
也是一个不错的解决方案,除非你监听动画事件。
转载为什么在打开模式时'$el.clientWidth‘等于0?(Vue.js) - 问答 - 腾讯云开发者社区-腾讯云