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执行这个解决方案，不大适合解决这类问题
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue+element+electron仿微信实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
详解使用element-ui table组件的筛选功能的一个小坑
在element ui 框架中，对于table框架，有一个筛选功能，这篇文章主要介绍了详解使用element-ui table组件的筛选功能的一个小坑，非常具有实用价值，需要的朋友可以参考下2018-11-11
这篇文章主要为大家介绍了VUE实现分布式医疗挂号系统预约挂号首页步骤详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
vue中有一张响应式系统的流程图，vue会将模板语法编译成render函数，通过render函数渲染生成Virtual dom，但是官方并没有对模板编译有详细的介绍，这篇文章带大家一起学习下vue的模板编译2023-07-07
这篇文章主要为大家详细介绍了vue实现树状表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
本篇文章主要介绍了详解vuejs几种不同组件（页面）间传值的方式，具有一定的参考价值，有兴趣的可以了解一下2017-06-06
本文主要介绍了vue结合leaflet实现鹰眼图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vuex mutitons和actions初使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了vue el-table实现行内编辑功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
最新评论