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