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

發(fā)布時間：2020-08-22 12:11:45 來源：腳本之家閱讀：247 作者：qq_20777797 欄目：web開發(fā)

在項目中遇到了一個問題，下面是vue template中的代碼：

我之前的寫法是

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

這樣做的結(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í)行的順序），我也很絕望啊

最后終于找到了解決的辦法：

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

看到一個別人的回答是：“在數(shù)據(jù)請求的回調(diào)中使用nextTick，在nextTick的回調(diào)里試試～”

還有一個人的回答是：“如果有依賴dom必須存在的情況，就放到mounted(){this.$nextTick(() => { /* code */ })}里面”（這種之前我試過，我太好用，不懂為什么）

我把這兩種方法綜合起來，其實主要是第一種方法，發(fā)現(xiàn)好用了！

以上這篇vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

猜你喜歡