Currently facing an issue with retrieving data from the database using Axios in Vue.js. I am able to see the data in my database through Vue.js developer tools like this: https://i.stack.imgur.com/n7BRO.png
However, when attempting to loop through the data using v-for, as shown below:
<template>
<div class="flex flex-col items-center py-4">
<NewPost></NewPost>
<Post v-for="(post,i) in posts.data" :post="post" :key="i"/>
</div>
</template>
<script>
import NewPost from "../components/NewPost";
import Post from "../components/Post";
export default {
name: "Newsfeed",
components: {
NewPost,
Post
},
data: () => {
return {
posts: null
}
},
mounted() {
axios.get('/api/posts').then(res => {
this.posts = res.data
console.log(this.posts)
}).catch(error => {
console.log('Unable to fetch posts')
})
}
}
</script>
<style scoped>
</style>
The console is displaying the following error message:
"[Vue warn]: Error in render: "TypeError: Cannot read property 'data' of null"
found in
---> at resources/js/views/Newsfeed.vue at resources/js/components/App.vue "
I am confused because I can see the data in Vue.js developer tools. Could there be an issue with the looping method? Any help would be greatly appreciated. Thank you!