Vue無法讀取HTMLCollection列表的length問題解決
問題
在學(xué)習(xí)餓了么實踐項目時候發(fā)現(xiàn)一個問題
在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
詳細(xì)：
el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子。
如果 root 實例掛載了一個文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。
注意 mounted 不會承諾所有的子組件也都一起被掛載。
如果你希望等到整個視圖都渲染完畢，可以用 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 不會承諾所有的子組件也都一起被掛載，所以在此階段，dom結(jié)構(gòu)還沒加載完，js就執(zhí)行了
解決方案
使用官方文檔說明（如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 確保渲染完成后再獲取數(shù)據(jù)。
重要的是理解執(zhí)行順序，異步調(diào)用的話可以使用Promise保證執(zhí)行順序
踩到的一個坑
有文章說可以在updated階段執(zhí)行，這時可以取到渲染完畢后的List
updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子
就是說，在使用better-scroll滾動時，會觸發(fā)updated，使得scrollYList不斷被推入數(shù)據(jù)，然后導(dǎo)致我用這個的時候，整個瀏覽器崩潰了，很是尷尬
哈哈哈，所以我感覺updated執(zhí)行這個解決方案，不大適合解決這類問題
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
nuxt 自定義 auth 中間件實現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實現(xiàn)令牌的持久化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue?this.$router.go(-1);返回時如何帶參數(shù)
這篇文章主要介紹了vue?this.$router.go(-1);返回時如何帶參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
本文通過實例代碼介紹對el-table表格的表頭操作方法,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue是可以自定義指令的,最近學(xué)習(xí)過程中遇見了一個需要懶加載的功能，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以下面這篇文章主要給大家介紹了關(guān)于Vue.js如何實現(xiàn)路由懶加載的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue-cli+webpack在生成的項目中使用bootstrap實例代碼
本篇文章主要介紹了vue-cli+webpack在生成的項目中使用bootstrap實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-05-05
vue圓形進度條環(huán)形進度條組件內(nèi)部顯示圖片示例
這篇文章主要為大家介紹了vue圓形進度條環(huán)形進度條組件內(nèi)部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)手機端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue源碼解析之?dāng)?shù)組變異的實現(xiàn)
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12