關(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里面寫(xiě)上一個(gè)屬性
changValue=null
如下圖：
2.在mounted鉤子函數(shù)里寫(xiě)一個(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了。
其他例子：
如果是第一次打開(kāi)模態(tài)框時(shí)無(wú)法獲取this.$refs，可以讓模態(tài)框打開(kāi)時(shí)修改一個(gè)data對(duì)象中的值，然后執(zhí)行this.$nextTick()就可以更新DOM了。
3.測(cè)驗(yàn)結(jié)果
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli+webpack記事本項(xiàng)目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue2.x 父組件監(jiān)聽(tīng)子組件事件并傳回信息的方法
本篇文章主要介紹了vue2.x 父組件監(jiān)聽(tīng)子組件事件并傳回信息的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
vue3 + vite + ts 中使用less文件全局變量的操作方法
這篇文章主要介紹了vue3 + vite + ts 中使用less文件全局變量的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
在計(jì)算字符數(shù)時(shí),一般情況下,英文字符、數(shù)字和大部分符號(hào)都可以被視為占一個(gè)字符長(zhǎng)度,因?yàn)樗鼈兪菃蝹€(gè)字節(jié),然而,對(duì)于某些特殊字符,如表情符號(hào)和部分非英文字符,會(huì)被認(rèn)為占據(jù)了多個(gè)字符長(zhǎng)度,本文給介紹了vue處理emoji表情占位符的操作方法,需要的朋友可以參考下2024-06-06
Vue3+TypeScript實(shí)現(xiàn)Docx/Excel預(yù)覽組件
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3+TypeScript實(shí)現(xiàn)Docx/Excel預(yù)覽組件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2024-04-04
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí)，攜帶參數(shù)跳轉(zhuǎn)，本文將詳細(xì)介紹vue路由傳參的三種方式，這三種傳參方式只是針對(duì)vue?Router?V3版本的,需要的朋友可以參考下2023-07-07
element中一個(gè)單選框radio時(shí)的選中和取消代碼詳解
這篇文章主要給大家介紹了關(guān)于element中一個(gè)單選框radio時(shí)的選中和取消的相關(guān)資料,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09
當(dāng)我們?cè)赩ue.js項(xiàng)目中引用圖片時(shí)，關(guān)于圖片路徑有以下幾種情形,下面通過(guò)本文給大家分享Vue.js中的圖片引用路徑的方式，感興趣的朋友一起看看吧2017-07-07
vue如何將字符串的一部分處理為html文檔并渲染到頁(yè)面
這篇文章主要介紹了vue如何將字符串的一部分處理為html文檔并渲染到頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06