在数据返回之前就去渲染导致列表没有渲染成功

来源：7-9 使用 async 和 await 改造异步请求

慕慕8105830

2023-10-08

我发现问题是在columnDetail页面的mounted阶段去请求数据，这个请求的响应还没返回时就去拿数据了，导致拿到的数据是空图片描述
这里的log打印list的值是空数组

图片描述
列表也没有显示出来

老师，这种问题该怎么处理？

写回答

3回答

不染的卡卡

2023-12-05

同学你好，我也遇到了此问题，请问应该怎么解决

张轩

2023-10-10

同学你好

你的问题来源于 postList 这个组件，

直接

在 setup 中你写到：
setup(props) {
    return {
        posts: props.list
    }
}
// 这会导致 posts 是没有响应性的，因为你直接将它赋值给了一个属性
// 假如想要这个代码工作是需要用 computed 进行包裹的
// 不过，其实直接在模版中使用 list 就可以了啊
<article v-for="post in list" > 就可以了

亲测有效

慕慕8105830

好的老师，使用computed问题解决了

2023-10-10

共1条回复

张轩

2023-10-08

同学你好

这里的 list 是响应式数据，应该是可以在页面上展示出来的。

请提供一下源代码（git），我在本地帮你看一下。

慕慕8105830

我的git地址: https://github.com/chapelll/zhihu_vue3.git

2023-10-09