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
類(lèi)型：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è)解決方案，不大適合解決這類(lèi)問(wèn)題
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue?this.$router.go(-1);返回時(shí)如何帶參數(shù)
這篇文章主要介紹了vue?this.$router.go(-1);返回時(shí)如何帶參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
本文通過(guò)實(shí)例代碼介紹對(duì)el-table表格的表頭操作方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue是可以自定義指令的,最近學(xué)習(xí)過(guò)程中遇見(jiàn)了一個(gè)需要懶加載的功能，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以下面這篇文章主要給大家介紹了關(guān)于Vue.js如何實(shí)現(xiàn)路由懶加載的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
vue-cli+webpack在生成的項(xiàng)目中使用bootstrap實(shí)例代碼
本篇文章主要介紹了vue-cli+webpack在生成的項(xiàng)目中使用bootstrap實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-05-05
vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例
這篇文章主要為大家介紹了vue圓形進(jìn)度條環(huán)形進(jìn)度條組件內(nèi)部顯示圖片示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了解決Vue+ts里面this.$store問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12