vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享
在項目中遇到了一個問題,下面是vue template中的代碼:
我之前的寫法是
這樣做的結(jié)果是下面取dom的操作,取到的dom都是undefined,也就是沒有取到。
原因是并沒有按照 請求數(shù)據(jù)—>渲染dom—>獲取dom的順序執(zhí)行,實際的執(zhí)行順序是 先獲取dom,而此時數(shù)組option中還是空的,上面的v-for循環(huán)也就沒有渲染出dom,所以根本取不到(不理解是為什么)
后來我又把請求數(shù)據(jù)寫在了created函數(shù)中,把取dom的操作寫在mounted函數(shù)中,竟然還是先執(zhí)行取dom的操作(是通過alert的順序來判斷執(zhí)行的順序),我也很絕望啊
最后終于找到了解決的辦法:
看到一個別人的回答是:“在數(shù)據(jù)請求的回調(diào)中使用nextTick,在nextTick的回調(diào)里試試~”
還有一個人的回答是:“如果有依賴dom必須存在的情況,就放到mounted(){this.$nextTick(() => { /* code */ })}里面”(這種之前我試過,我太好用,不懂為什么)
我把這兩種方法綜合起來,其實主要是第一種方法,發(fā)現(xiàn)好用了!
以上這篇vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3結(jié)合TypeScript項目開發(fā)實戰(zhàn)記錄
聽說有的公司已經(jīng)開始用vue3了 趕緊打開B站學(xué)一下,下面這篇文章主要給大家介紹了關(guān)于Vue3結(jié)合TypeScript項目開發(fā)實戰(zhàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09vue-admin-template?動態(tài)路由的實現(xiàn)示例
本文主要介紹了ue-admin-template動態(tài)路由的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12