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