vue?mounted周期中document.querySelectorAll()獲取不到元素的解決
mounted周期document.querySelectorAll()獲取不到元素
在mounted階段，若需要獲取的元素或組件有v-if，v-for屬性。
- v-if的初始化結(jié)果為false。
- v-for遍歷的數(shù)組初始化階段無(wú)值。
（即mounted階段后，根據(jù)獲得的后臺(tái)數(shù)據(jù)來(lái)動(dòng)態(tài)操作dom）這兩種情況都會(huì)導(dǎo)致mounted階段獲取元素的語(yǔ)句獲取不到dom。
解決方案
1、把獲取元素的語(yǔ)句放在異步獲取到數(shù)據(jù)，賦值給data中的key之后進(jìn)行。同時(shí)需要給獲取元素的語(yǔ)句加上setTimeout。因?yàn)閟etTimeout是宏任務(wù)，會(huì)在vue的render函數(shù)執(zhí)行之后再執(zhí)行。
2、把獲取元素的語(yǔ)句放到updated周期中執(zhí)行。這種情況下每次視圖更新之后都會(huì)執(zhí)行一次獲取元素的語(yǔ)句，如果不需要每次視圖更新之后都執(zhí)行，可以在mounted周期中，使用this.$once("hook: updated", function() {...}) ，讓獲取元素的語(yǔ)句只在updated階段執(zhí)行一次。
TypeError: this.$el.querySelectorAll is not a function報(bào)錯(cuò)
在渲染權(quán)限tree時(shí)出現(xiàn)
TypeError: this.$el.querySelectorAll is not a function
最后反復(fù)檢查代碼發(fā)現(xiàn)elementui中有個(gè)default-checked-keys（默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組）
我們?cè)诮壎ǖ臅r(shí)候一定要?jiǎng)討B(tài)綁定也就是：default-checked-keys
總結(jié)
希望以后不要折磨粗心啦~
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)頁(yè)面刷新動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面刷新動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue動(dòng)態(tài)添加表單的實(shí)現(xiàn)方法
在Vue.js應(yīng)用中,動(dòng)態(tài)表單是一個(gè)常見(jiàn)的需求,尤其是當(dāng)表單字段的數(shù)量和類(lèi)型需要根據(jù)用戶(hù)輸入或系統(tǒng)狀態(tài)動(dòng)態(tài)變化時(shí),本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)動(dòng)態(tài)表單的創(chuàng)建,并通過(guò)多個(gè)示例展示具體的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過(guò)代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案
這篇文章主要介紹了vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Vue實(shí)現(xiàn)根據(jù)hash高亮選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)根據(jù)hash高亮選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作
這篇文章主要介紹了在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue3管理后臺(tái)項(xiàng)目使用高德地圖選點(diǎn)的實(shí)現(xiàn)
本文主要介紹了Vue3管理后臺(tái)項(xiàng)目使用高德地圖選點(diǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue仿淘寶滑動(dòng)驗(yàn)證碼功能(樣式模仿)
淘寶大家都使用過(guò)，淘寶滑動(dòng)驗(yàn)證碼的目的是為了驗(yàn)證到底是人還是機(jī)器，今天小編給大家分享的是模仿淘寶滑動(dòng)驗(yàn)證碼的樣式，感興趣的朋友跟隨小編一起看看吧2019-12-12
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用scss的詳細(xì)方法步驟,scss是一種css預(yù)處理語(yǔ)言,定義了一種新的專(zhuān)門(mén)的編程語(yǔ)言,編譯后形成正常的css文件,為css增加一些編程特性,無(wú)需考慮瀏覽器的兼容性,讓css更加簡(jiǎn)潔、適應(yīng)性更強(qiáng),可讀性更佳,需要的朋友可以參考下2023-11-11
在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12