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)
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
webpack4+Vue搭建自己的Vue-cli项目过程分享
这篇文章主要介绍了webpack4+Vue搭建自己的Vue-cli，对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,下面这篇文章主要给大家介绍了关于Vue3引入axios封装接口的两种方法,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Nuxt.js实现一个SSR的前端博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
Vue3+ElementUI 多选框中复选框和名字点击方法效果分离方法
这篇文章主要介绍了Vue3+ElementUI 多选框中复选框和名字点击方法效果分离方法,文中补充介绍了VUE-Element组件 CheckBox多选框使用方法,需要的朋友可以参考下2024-01-01
今天我们来学习一下watch监听器和它的好兄弟watchEffect监听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用，希望对大家有所帮助2023-02-02
elementUI Pagination 分页指定最大页的问题及解决方法(page-count)
项目中遇到数据量大,查询的字段多,但用户主要使用的是最近的一些数据,1万条以后的数据一般不使用,这篇文章主要介绍了elementUI Pagination 分页指定最大页的问题及解决方法(page-count),需要的朋友可以参考下2024-08-08
这篇文章主要介绍了VueJs组件之父子通讯的方式，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了vue实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了vue下载excel的实现代码,后台用post方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue 项目 iOS WKWebView 加载问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
最新评论