Dealing with object return from axios-CodePudding

Someone could please point me what I need do to get the nuxt axios return which works inside vuetify v-for?

I'm using the following code:

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

My componnent data is:

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

My v-for is:

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

And the error I'm getting is:

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

If I fill my componnent data with the json as object manually works fine, example:

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"
            }
        ]
    }
},

Console log show the array from axios too.

The application is using SSR, my initial guess was on be an issue with async, page get rendered first and object don't exists triggering this error.

CodePudding user response：

Since its a list of objects shouldn't it be like this? :

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

CodePudding user response：

After read a lot of similar situations here and on social networks, have found this one:

Object assignment in Vue.js method

Then I have tried make the default values for component data like docs sayed to do:

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

Other errors come out.

After some tries debugging (removing items from object one by one), have found in the original component there a lot of v-for and nuxt-link.

Inside v-for will drop errors on some situations.

Inside nuxt-link will not accept null (empty default object) or blank values.

Conclusion:

Seems I will need validate the entire object / array always and in the end force an Object.assign. Since I haven't made the API yet, solution will be hardcode an json file to read local.

CodePudding user response：

You need to change the type of your posts to Array []