欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享

 更新時間:2018年03月17日 11:46:43   作者:qq_20777797  
下面小編就為大家分享一篇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)文章

  • vue更新數(shù)據(jù)卻不渲染頁面的解決

    vue更新數(shù)據(jù)卻不渲染頁面的解決

    這篇文章主要介紹了vue更新數(shù)據(jù)卻不渲染頁面的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 聊聊Vue 中 title 的動態(tài)修改問題

    聊聊Vue 中 title 的動態(tài)修改問題

    這篇文章主要介紹了 Vue 中 title 的動態(tài)修改問題,文中通過兩種方案給大家介紹了title的傳遞問題 ,需要的朋友可以參考下
    2019-06-06
  • Vue3結(jié)合TypeScript項目開發(fā)實戰(zhàn)記錄

    Vue3結(jié)合TypeScript項目開發(fā)實戰(zhàn)記錄

    聽說有的公司已經(jīng)開始用vue3了 趕緊打開B站學(xué)一下,下面這篇文章主要給大家介紹了關(guān)于Vue3結(jié)合TypeScript項目開發(fā)實戰(zhàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-09-09
  • 使用vue3指令封裝一個圖片預(yù)覽功能

    使用vue3指令封裝一個圖片預(yù)覽功能

    這篇文章主要為大家詳細介紹了如何使用?vue3?指令封裝一個后臺管理系統(tǒng)圖片預(yù)覽功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-01-01
  • Vue 組件間的樣式?jīng)_突污染

    Vue 組件間的樣式?jīng)_突污染

    本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染,當多個樣式出現(xiàn)時,就會導(dǎo)致樣式?jīng)_突,本文介紹了具體解決方法
    2017-08-08
  • 基于vue.js實現(xiàn)側(cè)邊菜單欄

    基于vue.js實現(xiàn)側(cè)邊菜單欄

    這篇文章主要為大家詳細介紹了基于vue.js實現(xiàn)側(cè)邊菜單欄的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • vue-admin-template?動態(tài)路由的實現(xiàn)示例

    vue-admin-template?動態(tài)路由的實現(xiàn)示例

    本文主要介紹了ue-admin-template動態(tài)路由的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • vue項目打包部署_nginx代理訪問方法詳解

    vue項目打包部署_nginx代理訪問方法詳解

    今天小編就為大家分享一篇vue項目打包部署_nginx代理訪問方法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 動態(tài)Axios的配置步驟詳解

    動態(tài)Axios的配置步驟詳解

    這篇文章主要給大家分享介紹了關(guān)于動態(tài)Axios的配置步驟,文中通過示例代碼介紹的非常詳細,通過這個教程大家可以很方便的實現(xiàn)動態(tài)Axios的配置,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-01-01
  • 詳解vue-cli3 中跨域解決方案

    詳解vue-cli3 中跨域解決方案

    這篇文章主要介紹了vue-cli3 中跨域解決方案,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-04-04

最新評論