vue中實(shí)現(xiàn)先請(qǐng)求數(shù)據(jù)再渲染dom分享
在項(xiàng)目中遇到了一個(gè)問(wèn)題，下面是vue template中的代碼：
我之前的寫(xiě)法是
這樣做的結(jié)果是下面取dom的操作，取到的dom都是undefined，也就是沒(méi)有取到。
原因是并沒(méi)有按照 請(qǐng)求數(shù)據(jù)—>渲染dom—>獲取dom的順序執(zhí)行，實(shí)際的執(zhí)行順序是 先獲取dom，而此時(shí)數(shù)組option中還是空的，上面的v-for循環(huán)也就沒(méi)有渲染出dom，所以根本取不到（不理解是為什么）
后來(lái)我又把請(qǐng)求數(shù)據(jù)寫(xiě)在了created函數(shù)中，把取dom的操作寫(xiě)在mounted函數(shù)中，竟然還是先執(zhí)行取dom的操作（是通過(guò)alert的順序來(lái)判斷執(zhí)行的順序），我也很絕望啊
最后終于找到了解決的辦法：
看到一個(gè)別人的回答是：“在數(shù)據(jù)請(qǐng)求的回調(diào)中使用nextTick，在nextTick的回調(diào)里試試～”
還有一個(gè)人的回答是：“如果有依賴(lài)dom必須存在的情況，就放到mounted(){this.$nextTick(() => { /* code */ })}里面”（這種之前我試過(guò)，我太好用，不懂為什么）
我把這兩種方法綜合起來(lái)，其實(shí)主要是第一種方法，發(fā)現(xiàn)好用了！
以上這篇vue中實(shí)現(xiàn)先請(qǐng)求數(shù)據(jù)再渲染dom分享就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue3.0手動(dòng)封裝分頁(yè)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問(wèn)題
這篇文章主要介紹了vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程,也就是new Vue() 開(kāi)始就是vue生命周期的開(kāi)始。Vue 實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過(guò)程,稱(chēng)這是Vue的?命周期2022-10-10
Vue2+ElementUI表單、Form組件的封裝過(guò)程
在 Vue2 項(xiàng)目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿(mǎn)足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過(guò)程,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)圖片輪播效果，vue如何實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue-element-admin如何從mock數(shù)據(jù)過(guò)渡到使用后臺(tái)接口
這篇文章主要介紹了vue-element-admin如何從mock數(shù)據(jù)過(guò)渡到使用后臺(tái)接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue.js計(jì)算屬性的變化監(jiān)聽(tīng)的示例詳解
在Vue.js中,計(jì)算屬性（computed properties）是組件的重要組成部分,它們根據(jù)組件的數(shù)據(jù)自動(dòng)計(jì)算新的值,并在數(shù)據(jù)變化時(shí)自動(dòng)更新,本文將深入探討如何在Vue.js中監(jiān)聽(tīng)計(jì)算屬性的變化,幫助你更好地理解Vue.js的響應(yīng)式系統(tǒng),需要的朋友可以參考下2025-03-03
vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項(xiàng)目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過(guò)引用并調(diào)用ElQuarterPicker.vue組件來(lái)實(shí)現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue中實(shí)現(xiàn)在外部調(diào)用methods的方法(推薦)
下面小編就為大家分享一篇vue中實(shí)現(xiàn)在外部調(diào)用methods的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06