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