Vue無(wú)法讀取HTMLCollection列表的length問(wèn)題解決
問(wèn)題
在學(xué)習(xí)餓了么實(shí)踐項(xiàng)目時(shí)候發(fā)現(xiàn)一個(gè)問(wèn)題
在mounted階段，獲取Element對(duì)象，console.log()可以讀取出列表，而卻無(wú)法讀出它的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
詳細(xì)：
el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。
如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。
注意 mounted 不會(huì)承諾所有的子組件也都一起被掛載。
如果你希望等到整個(gè)視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}該鉤子在服務(wù)器端渲染期間不被調(diào)用。
看完以上文檔介紹，可以知道在mounted階段，mounted 不會(huì)承諾所有的子組件也都一起被掛載，所以在此階段，dom結(jié)構(gòu)還沒(méi)加載完，js就執(zhí)行了
解決方案
使用官方文檔說(shuō)明（如果你希望等到整個(gè)視圖都渲染完畢，可以用 vm.$nextTick 確保渲染完成后再獲取數(shù)據(jù)。
重要的是理解執(zhí)行順序，異步調(diào)用的話可以使用Promise保證執(zhí)行順序
踩到的一個(gè)坑
有文章說(shuō)可以在updated階段執(zhí)行，這時(shí)可以取到渲染完畢后的List
updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子
就是說(shuō)，在使用better-scroll滾動(dòng)時(shí)，會(huì)觸發(fā)updated，使得scrollYList不斷被推入數(shù)據(jù)，然后導(dǎo)致我用這個(gè)的時(shí)候，整個(gè)瀏覽器崩潰了，很是尷尬
哈哈哈，所以我感覺(jué)updated執(zhí)行這個(gè)解決方案，不大適合解決這類問(wèn)題
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue表單驗(yàn)證你真的會(huì)了嗎？vue表單驗(yàn)證（form）validate
這篇文章主要介紹了vue表單驗(yàn)證你真的會(huì)了嗎？vue表單驗(yàn)證（form）validate,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼
這篇文章主要介紹了vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
使用Vue3的watch實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新(附詳細(xì)代碼)
vue.js是一個(gè)輕量級(jí)的前端框架,你可以使用它來(lái)實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)刷新,下面這篇文章主要介紹了使用Vue3的watch實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
vue的url請(qǐng)求圖片的問(wèn)題及請(qǐng)求失敗解決
這篇文章主要介紹了vue的url請(qǐng)求圖片的問(wèn)題及請(qǐng)求失敗解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
下面小編就為大家分享一篇Vue 攔截器對(duì)token過(guò)期處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue3中的createApp分析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
詳解vue-cli構(gòu)建項(xiàng)目反向代理配置
本篇文章主要介紹了詳解vue-cli構(gòu)建項(xiàng)目反向代理配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個(gè)關(guān)鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)：ref 與 reactive,需要的朋友可以參考下2024-01-01
electron實(shí)現(xiàn)打印功能支持靜默打印、無(wú)感打印
使用electron開(kāi)發(fā)應(yīng)用遇到了打印小票的功能,實(shí)現(xiàn)途中還是幾經(jīng)波折,下面這篇文章主要給大家介紹了關(guān)于electron實(shí)現(xiàn)打印功能支持靜默打印、無(wú)感打印的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03