您好,登錄后才能下訂單哦!
這篇“Vue讀取HTMLCollection列表的length為0問題怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue讀取HTMLCollection列表的length為0問題怎么解決”文章吧。
在計(jì)算better-scroll右側(cè)列表滾動(dòng)高度的時(shí)候,發(fā)現(xiàn)列表的length為0
上網(wǎng)查閱發(fā)現(xiàn)問題可能是由于mounted 不會(huì)承諾所有的子組件也都一起被掛載。
這個(gè)時(shí)候dom元素還有沒掛載完畢。如果你希望等到整個(gè)視圖都渲染完畢,可以用 vm.$nextTick 替換掉 mounted:
mounted () { this.$nextTick(() => { this._initScroll(), this._calculateHeight(); }); },
但是不清楚為什么使用了這個(gè)方法后獲取的length依舊為0,
就在_calculateHeight()方法上加了個(gè)定時(shí)器,等到完全渲染完成時(shí)再獲取高度(這種問題可能會(huì)出現(xiàn)bug,不知道頁面什么時(shí)候渲染完畢):
_calculateHeight () { setTimeout(() => { let foodList = this.$refs.right.getElementsByClassName('food-list-hook'); let height = 0; this.listHeight.push(height); for (var i = 0; i < foodList.length; i++) { let item = foodList[i]; height += item.clientHeight; this.listHeight.push(height); } }, 200) },
在學(xué)習(xí)餓了么實(shí)踐項(xiàng)目時(shí)候發(fā)現(xiàn)一個(gè)問題,
在mounted階段,獲取Element對(duì)象,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 替換,并掛載到實(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)還沒加載完,js就執(zhí)行了
1.使用官方文檔說明(如果你希望等到整個(gè)視圖都渲染完畢,可以用 vm.$nextTick 確保渲染完成后再獲取數(shù)據(jù)。
重要的是理解執(zhí)行順序,異步調(diào)用的話可以使用Promise保證執(zhí)行順序
踩到的一個(gè)坑:
有文章說可以在updated階段執(zhí)行,這時(shí)可以取到渲染完畢后的List
updated:由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁,在這之后會(huì)調(diào)用該鉤子
就是說,在使用better-scroll滾動(dòng)時(shí),會(huì)觸發(fā)updated,使得scrollYList不斷被推入數(shù)據(jù),然后導(dǎo)致我用這個(gè)的時(shí)候,整個(gè)瀏
覽器崩潰了,很是尷尬,哈哈哈,所以我感覺updated執(zhí)行這個(gè)解決方案,不大適合解決這類問題
以上就是關(guān)于“Vue讀取HTMLCollection列表的length為0問題怎么解決”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。