vue.js 里刚开始数据请求延迟的话会短暂显示那个没数据的画面咋搞哦

[qwertyzzz]

有数据

无数据

data{ list:[] }

list 是异步获取的实际有数据的 如何解决刚开始会短暂显示无数据呀

[2kCS5c0b0ITXE5k2]

加 loading

[qwertyzzz]

@emeab 获取的时候先加 loading 吗

[imherer]

对的，按 1L 说的加 loading 不就好了

而且这种操作本来就应该加 loading，万一你获取数据花费时间较长怎么办？ loading 是良策

[vivipure]

loading, 骨架屏，v-cloak

[qwertyzzz]

好的好的 谢谢各位大佬

[LyleRockkk]

告诉用户当前正在加载数据就好了，可先显示默认无数据状态图片或者加 loading 告知正在加载

[RickyC]

让显示数据的那里 display:none;

得到数据后, 在回调里去掉 display:none; 这个属性

[1277840534]

如果不考虑布局结构突然变化的话也可以用用 v-if

[TimPeake]

这个跟 Vue 没啥关系吧 换个框架你也会这么问

[AreYou0k]

beforeCreate

[ragnaroks]

<loading v-if="isLoading" />
<data-panel v-else />

[BluesQu]

v-cloak

[zhuangzhuang1988]

https://github.com/posva/vue-promised/blob/master/src/index.js
看下源码
组合出 3 个状态就好了

[NBUG]

这问题无关框架啊

[JayLin1011]

vue@2 的方案：
1. 动态组件；
2. 条件渲染；
3. 异步组件；
vue@3 的方案：suspense 。
具体情况可根据具体需求灵活选择。

[chaselen]

<empty v-if="list && !list.length" />
<data v-if="list && list.length" />

data { list: null }

[353943780]

自己要设置 requestStatus 记录请求前中后的状态，不同的状态，显示不一样的 ui dom 。

直接判断 list 为空也不合适，有可能数据真的为空，就要显示数据空状态的 ui 。

[cszchen]

@RickyC 用 v-if 可能比操作 dom 修改 css 更合适

[cszchen]

看用的框架有没有骨架，没有的话用 loading

[CODEWEA]

placeholder

[npe]

骨架屏

[RickyC]

@cszchen 我一直 vue 和 jQuery 配合使用, dom 操作还是很常用的, 对我来说

[qxqsxbd]

因为你少个数据获取中的状态，类比 Promise 的三个状态 Pending （获取中）、Resolve （有数据）和 Reject （没数据）

[redbuck]

LS 加一

你需要增加一个状态

[ljpCN]

区分一下初始状态(尚未 fetch)和空状态(fetch 的结果为空)，初始状态显示一个尚未获取或者显示 loading，空状态显示未获取到数据的提示。

[azh7138m]

@RickyC

vue 官方文档有写怎么处理这个问题
vue 官方文档有中文

互相讨论低质量问题只会是浪费时间