Vue 无法读取HTMLCollection列表的length解决
【摘要】 Vue 无法读取HTMLCollection列表的length解决考必过小编为大家整理了关于Vue 无法读取HTMLCollection列表的length解决的信息，希望可以帮助到大家！
Vue 无法读取HTMLCollection列表的length解决
标签：服务器for就是取数据OLEroc问题ollyi++
问题
在学习饿了么实践项目时候发现一个问题，
在mounted阶段，获取Element对象，console.log()可以读取出列表，而却无法读出它的length
let foodList = this.$refs.menuWrapper.getElementsByClassName(‘calcpate-content‘)
let height = 0
console.log(foodList)
console.log(foodList.length)
for (var i = 0; i < foodList.length; i++) {
height += foodList[i].cpentHeight
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就执行了
解决方案：
1.使用官方文档说明（如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick确保渲染完成后再获取数据。
重要的是理解执行顺序，异步调用的话可以使用Promise保证执行顺序
踩到的一个坑：
有文章说可以在updated阶段执行，这时可以取到渲染完毕后的List
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
就是说，在使用better-scroll滚动时，会触发updated，使得scrollYList不断被推入数据，然后导致我用这个的时候，整个浏
览器崩溃了，很是尴尬，哈哈哈，所以我感觉updated执行这个解决方案，不大适合解决这类问题
本文来源于：https://blog.csdn.net/weixin_41602509/article/details/86661758
Vue 无法读取HTMLCollection列表的length解决
标签：服务器for就是取数据OLEroc问题ollyi++
以上就是Vue 无法读取HTMLCollection列表的length解决的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！