Vue无法读取HTMLCollection列表的length问题解决
更新时间：2024年03月04日 11:01:11 作者：Yuval Zhong
这篇文章主要介绍了Vue无法读取HTMLCollection列表的length问题解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题
在学习饿了么实践项目时候发现一个问题
在mounted阶段，获取Element对象，console.log()可以读取出列表，而却无法读出它的length
如下
let foodList = this.$refs.menuWrapper.getElementsByClassName('calculate-content')
let height = 0
console.log(foodList)
console.log(foodList.length)
for (var i = 0; i < foodList.length; i++) {
height += foodList[i].clientHeight
this.scrollYList.push(height)
}
原因
以下出自官方文档
mounted
类型：Function
详细：
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。
如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}该钩子在服务器端渲染期间不被调用。
看完以上文档介绍，可以知道在mounted阶段，mounted 不会承诺所有的子组件也都一起被挂载，所以在此阶段，dom结构还没加载完，js就执行了
解决方案
使用官方文档说明（如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 确保渲染完成后再获取数据。
重要的是理解执行顺序，异步调用的话可以使用Promise保证执行顺序
踩到的一个坑
有文章说可以在updated阶段执行，这时可以取到渲染完毕后的List
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
就是说，在使用better-scroll滚动时，会触发updated，使得scrollYList不断被推入数据，然后导致我用这个的时候，整个浏览器崩溃了，很是尴尬
哈哈哈，所以我感觉updated执行这个解决方案，不大适合解决这类问题
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue3中实现动态主题切换功能,通过明亮和暗色主题的选择,提供个性化使用体验,使用setup语法糖优化代码,通过创建组件和响应式变量来进行主题切换,并动态加载CSS文件2024-09-09
这篇文章主要为大家介绍了帮助我们高效操作Virtual DOM简单实现及原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
如何用vue3+Element plus实现一个完整登录功能
要实现用户的登录功能,可以使用Vue3和Element Plus,下面这篇文章主要给大家介绍了关于如何基于Vue3和Element Plus组件库实现一个完整的登录功能,文中提供了详细的代码示例,需要的朋友可以参考下2023-10-10
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。2017-03-03
Vue中使用Element UI的Table组件实现嵌套表格功能
这篇文章主要介绍了Vue中使用Element UI的Table组件实现嵌套表格功能,演示如何在Vue中使用Element UI的Table组件实现嵌套表格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue内部渲染视图的方法，本文通过实例代码图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
下面小编就为大家分享一篇vue 子组件向父组件传值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于在vue上使用cesium开发三维地图的详细过程,Cesium是一个强大的JavaScript库,支持三维地理信息展示,并提供了丰富的地理空间数据可视化功能,需要的朋友可以参考下2023-12-12
最新评论