Vue获取HTMLCollection列表的children时结果为undefined问题
更新时间：2024年03月06日 09:58:09 作者：莫诺库诺
这篇文章主要介绍了Vue获取HTMLCollection列表的children时结果为undefined问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue获取HTMLCollection列表的children时结果为undefined
在Vue的钩子函数mounted()中尝试通过document.querySelectorAll()获取HTMLCollection时发现返回的结果为undefined，且length的值也为0：
在Vue的官网查询得知，mounted钩子函数不能保证所有子组件都被挂载完成：
- 在实例挂载完成后被调用，这时候传递给 app.mount 的元素已经被新创建的 vm.$el 替换了。
- 如果根实例被挂载到了一个文档内的元素上，当 mounted 被调用时， vm.$el 也会在文档内。
- 注意 mounted 不会保证所有的子组件也都被挂载完成。
- 如果你希望等待整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
但我在加入了$nextTick实例方法之后，仍然是同样的现象,令人困惑。
于是我便想到了通过MutationObserver来监视DOM的变动,在DOM全部渲染完毕后再获取。
代码如下：
async mounted() {
// 监视DOM,全部DOM加载完毕后再调用回调函数
this.observer = new MutationObserver(this.getDir);
this.observer.observe(document.querySelector(`#content`), {
childList: true,
subtree: true,
attributes: true
});
}
结果成功：
关于MutationObserver可以移步MDN或者其它博文。
vue读取HTMLCollection列表的length为0问题
在计算better-scroll右侧列表滚动高度的时候，发现列表的length为0
原因：
上网查阅发现问题可能是由于mounted 不会承诺所有的子组件也都一起被挂载。
这个时候dom元素还有没挂载完毕。
如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
mounted () {
this.$nextTick(() => {
this._initScroll(), this._calculateHeight();
}); },
但是不清楚为什么使用了这个方法后获取的length依旧为0，
就在_calculateHeight()方法上加了个定时器，等到完全渲染完成时再获取高度（这种问题可能会出现bug，不知道页面什么时候渲染完毕）：
_calculateHeight () {
setTimeout(() => {
let foodList = this.$refs.right.getElementsByClassName('food-list-hook');
let height = 0;
this.listHeight.push(height);
for (var i = 0; i < foodList.length; i++) {
let item = foodList[i];
height += item.clientHeight;
this.listHeight.push(height);
}
}, 200)
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了el-tree loadNode懒加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue动态渲染svg、添加点击事件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本篇文章主要介绍了vue省市区三联动下拉选择组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
今天小编就为大家分享一篇vue 使用自定义指令实现表单校验的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue通过路由实现页面间参数的传递,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
vue3父子通信ref,toRef,toRefs使用实例详解
这篇文章主要介绍了vue3父子通信ref,toRef,toRefs使用实例详解,分别介绍了ref是什么、toRef是什么及toRefs是什么和最佳使用方式,结合示例代码给大家讲解的非常详细,需要的朋友可以参考下2023-10-10
vue打包静态资源后显示空白及static文件路径报错的解决
这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了使用VUE实现一键复制内容功能,功能就是当我们点击复制按钮时，会提示“复制成功”，这样复制的内容就可以在其他地方使用了，感兴趣的朋友可以学习一下2023-04-04
这篇文章主要介绍了详解element-ui设置下拉选择切换必填和非必填，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了vue属性props默认类型的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论