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中的核心就是組件，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼，下面通過(guò)本文重點(diǎn)給大家介紹vue 創(chuàng)建組件及組件使用方法，感興趣的朋友一起看看吧2017-07-07
vue 子組件watch監(jiān)聽(tīng)不到prop的解決
這篇文章主要介紹了vue 子組件watch監(jiān)聽(tīng)不到prop的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Vue常用API、高級(jí)API的相關(guān)總結(jié)
這篇文章主要介紹了Vue常用API、高級(jí)API的相關(guān)總結(jié)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
解決vue做詳情頁(yè)跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問(wèn)題
這篇文章主要介紹了解決vue做詳情頁(yè)跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了解決echart在vue中id重復(fù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了VUE 3D輪播圖封裝實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
Vue常見(jiàn)錯(cuò)誤Error?in?mounted?hook解決辦法
這篇文章主要給大家介紹了關(guān)于Vue常見(jiàn)錯(cuò)誤Error?in?mounted?hook的解決辦法,出現(xiàn)這樣的問(wèn)題,會(huì)發(fā)現(xiàn)跟聲明周期鉤子有關(guān)系,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中v-show和v-if的異同 ，通過(guò)代碼詳解v-show用法，本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
element-ui中樣式覆蓋問(wèn)題的方法總結(jié)
我們?cè)谑褂胑lement-ui的時(shí)候經(jīng)常會(huì)遇到需要修改組件默認(rèn)樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03