vue 报Cannot read properties of undefined (reading ‘clientHeight’)

01.问题分析

1.问题原因是dom未加载完成导致clientHeight无法取到，一般在mounted中让el挂载完成后再取clientHeight

2.该方法在浏览器窗口变化时也会执行

3.将获取dom方法写在mounted里并且加了$nextTick方法还是报该错误，代码如下图所示

如上图所示界面刷新加载时依旧会报该错误
切换路由时没有报该错误

02.问题解决

1.查看HTMLCollection

2.刷新界面时可以看到HTMLCollection为空数组，如下图所示

3.HTMLCollection也就是问题所在，判断HTMLCollection的长度大于0后再进行后面的操作，代码如下所示

var mainHeight = document.getElementsByClassName(mainClass).length > 0 && document.getElementsByClassName(mainClass)[0].clientHeight;
var reduceHeight = 0;
orderClass.filter(v=>{
    reduceHeight += document.getElementsByClassName(v).length > 0 && document.getElementsByClassName(v)[0].clientHeight;
})
return mainHeight - reduceHeight - parseInt(orderNum);
1
2
3
4
5
6