關(guān)于this.$refs獲取不到dom的可能原因及解決方法
更新時間：2023年11月14日 10:47:52 作者：我坑我承認(rèn)
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景
搞餓了么高仿APP時，使用
this.$refs.wrapper.getElementsByClassName('food-list')時獲取不到dom節(jié)點
正常能獲取到應(yīng)該是如下圖：
然后我又用了網(wǎng)上的方法：
this.$refs.foodList （foodList是li的dom節(jié)點）
結(jié)果還是刷新頁面時獲取不到dom
然后我對比了網(wǎng)友訪的餓了么的源碼，下面是網(wǎng)友的
下面是我的：
然后官網(wǎng)的解釋是：因為 ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時候你不能訪問它們 - 它們還不存在
問題解決
1.在data里面寫上一個屬性
changValue=null
如下圖：
2.在mounted鉤子函數(shù)里寫一個超時調(diào)用
setTimeout(() => {
//修改數(shù)據(jù)
this.changValue = 1;
//DOM還沒更新
this.$nextTick(() => {
//DOM現(xiàn)在更新了
this.calculateHeight();
});
},0);
使得每次掛載完成時changValue這個屬性的值獲得改變，然后調(diào)用this.$nextTick()就可以更新DOM了。
其他例子：
如果是第一次打開模態(tài)框時無法獲取this.$refs，可以讓模態(tài)框打開時修改一個data對象中的值，然后執(zhí)行this.$nextTick()就可以更新DOM了。
3.測驗結(jié)果
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue中更改數(shù)組中屬性,在頁面中不生效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
el-form組件提供了表單驗證的功能,可以通過在el-form上綁定rules屬性,并在el-form-item上設(shè)置prop屬性來進行校驗,這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下2023-12-12
本文主要介紹了vue全局接入百度地圖的實現(xiàn)示例，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于Vue管理系統(tǒng)前端之組件拆分封裝的相關(guān)資料，文中通過實例代碼結(jié)束的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue移動端實現(xiàn)紅包雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
本篇文章主要介紹了Vue引入遠(yuǎn)程JS文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
element中TimePicker時間選擇器禁用部分時間(顯示禁用到分鐘)
這篇文章主要介紹了element中TimePicker時間選擇器禁用部分時間(顯示禁用到分鐘)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
微信的浮窗，大伙應(yīng)該都用過，當(dāng)我們正在閱讀一篇公眾號文章時，突然需要處理微信消息，點擊浮窗，在微信上會有個浮標(biāo)，點擊浮標(biāo)可以再次回到文章。今天小編抽空給大家介紹vue 實現(xiàn)微信浮標(biāo)效果，感興趣的朋友一起看看吧2019-09-09
何時/使用 Vue3 render 函數(shù)的教程詳解
這篇文章主要介紹了何時/使用 Vue3 render 函數(shù)的教程詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07