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