vue.js - v-for与异步的问题

问题描述

问 题

li(v-for="result,idx in results" ,:key='result')
    h1 {{result.something}}
    p {{details[idx].somethingElse}}

results在第一次异步的时候拿到，details需要在拿到results之后再进行第二次异步。现在的问题是，在拿到了results后的v-for里渲染会出错(details还没获取到)。请问有啥优雅的解决方法吗

解决方案

最簡單的辦法是用 v-if 來防止在拿到資料前渲染：

// result.detail 如果是 undefined, null 就不會繼續渲染，等到拿到資料就會渲染出現了
// 因為不確定你的 result.details 初始是啥
// 如果是數組的話就判斷 result.details.length !== 0
// 如果是對象就如同上面講的
p(v-if="result.details") {{details[idx].somethingElse}}

不過這樣畫面會稍稍突兀，想要畫面美觀且使用者體驗強的話可寫一個公用的 loading 組件，在每次正在載入資料時可以讓其顯示來代替空白。

这篇关于vue.js - v-for与异步的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！