处理来自 axios 的对象 return

Question

有人可以告诉我我需要做什么来获得在 vuetify v-for 中工作的 nuxt axios return？

我正在使用以下代码：

async asyncData() {
    let res = await axios.get('https://jsonplaceholder.typicode.com/posts')
        console.log(res)
        let objectPosts = {}
        objectPosts = res.data
        return (posts: objectPosts)
},

我的组件数据是：

data() {
    return {
        posts: {}
    }
},

我的 v-for 是：

<article v-for="(post, index) in posts" :key="index">

我得到的错误是：

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"

如果我用 json 作为对象手动填充我的组件数据就可以正常工作，例如：

data() {
    return {
        posts: [
            {
            "userId": 1,
            "id": 1,
            "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
            "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
            },
            {
            "userId": 1,
            "id": 2,
            "title": "qui est esse",
            "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
            }
        ]
    }
},

控制台日志也显示来自 axios 的数组。

该应用程序正在使用 SSR，我最初猜测是异步问题，页面首先呈现并且对象不存在触发此错误。

Answer 1

在这里和社交网络上看了很多类似的情况后，找到了这个：

然后我尝试为组件数据设置默认值，就像文档所说的那样：

https://v2.vuejs.org/v2/guide/reactivity.html?redirect=true#Declaring-Reactive-Properties

出现其他错误。

经过一些尝试调试（从对象中一项一项地删除项目），发现在原始组件中有很多 v-for 和 nuxt-link.

内部 v-for 会在某些情况下丢弃错误。

内部 nuxt-link 将不接受 null（空默认对象）或空白值。

结论：

似乎我需要始终验证整个对象/数组并最终强制 Object.assign。由于我还没有制作 API，解决方案将是硬编码一个 json 文件以读取本地。

Answer 2

既然是对象列表，不应该是这样的吗？ :

data() {
    return {
        posts: {[]}
    }
},

Answer 3

您需要将 posts 的类型更改为 Array []

处理来自 axios 的对象 return

Dealing with object return from axios

object

server-side-rendering

axios

nuxt.js

vuetify.js