vue實現先請求數據再渲染dom
來源：懂視網
責編：小OO
時間：2020-11-27 19:59:05
vue實現先請求數據再渲染dom
在項目中遇到了一個問題，下面是vue template中的代碼。我之前的寫法是；這樣做的結果是下面取dom的操作，取到的dom都是undefined，也就是沒有取到。原因是并沒有按照 請求數據—>；渲染dom—>；獲取dom的順序執行，實際的執行順序是 先獲取dom，而此時數組option中還是空的，上面的v-for循環也就沒有渲染出dom，所以根本取不到（不理解是為什么）。后來我又把請求數據寫在了created函數中，把取dom的操作寫在mounted函數中，竟然還是先執行取dom的操作（是通過alert的順序來判斷執行的順序），我也很絕望啊。最后終于找到了解決的辦法。看到一個別人的回答是：“在數據請求的回調中使用nextTick，在nextTick的回調里試試～”。
導讀在項目中遇到了一個問題，下面是vue template中的代碼。我之前的寫法是；這樣做的結果是下面取dom的操作，取到的dom都是undefined，也就是沒有取到。原因是并沒有按照 請求數據—>；渲染dom—>；獲取dom的順序執行，實際的執行順序是 先獲取dom，而此時數組option中還是空的，上面的v-for循環也就沒有渲染出dom，所以根本取不到（不理解是為什么）。后來我又把請求數據寫在了created函數中，把取dom的操作寫在mounted函數中，竟然還是先執行取dom的操作（是通過alert的順序來判斷執行的順序），我也很絕望啊。最后終于找到了解決的辦法。看到一個別人的回答是：“在數據請求的回調中使用nextTick，在nextTick的回調里試試～”。
本文主要為大家分享一篇vue中實現先請求數據再渲染dom分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧，希望能幫助到大家。
在項目中遇到了一個問題，下面是vue template中的代碼：
我之前的寫法是
這樣做的結果是下面取dom的操作，取到的dom都是undefined，也就是沒有取到。
原因是并沒有按照 請求數據—>渲染dom—>獲取dom的順序執行，實際的執行順序是 先獲取dom，而此時數組option中還是空的，上面的v-for循環也就沒有渲染出dom，所以根本取不到（不理解是為什么）
后來我又把請求數據寫在了created函數中，把取dom的操作寫在mounted函數中，竟然還是先執行取dom的操作（是通過alert的順序來判斷執行的順序），我也很絕望啊
最后終于找到了解決的辦法：
看到一個別人的回答是：“在數據請求的回調中使用nextTick，在nextTick的回調里試試～”
還有一個人的回答是：“如果有依賴dom必須存在的情況，就放到mounted(){this.$nextTick(() => { /* code */ })}里面”（這種之前我試過，我太好用，不懂為什么）
我把這兩種方法綜合起來，其實主要是第一種方法，發現好用了！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
vue實現先請求數據再渲染dom
在項目中遇到了一個問題，下面是vue template中的代碼。我之前的寫法是；這樣做的結果是下面取dom的操作，取到的dom都是undefined，也就是沒有取到。原因是并沒有按照 請求數據—>；渲染dom—>；獲取dom的順序執行，實際的執行順序是 先獲取dom，而此時數組option中還是空的，上面的v-for循環也就沒有渲染出dom，所以根本取不到（不理解是為什么）。后來我又把請求數據寫在了created函數中，把取dom的操作寫在mounted函數中，竟然還是先執行取dom的操作（是通過alert的順序來判斷執行的順序），我也很絕望啊。最后終于找到了解決的辦法。看到一個別人的回答是：“在數據請求的回調中使用nextTick，在nextTick的回調里試試～”。
