My attempt to render a list of data seems to be hitting a roadblock - the data doesn't display when the page loads. The API call works perfectly, fetching all the necessary data and setting it to my data object. Here's the code snippet: once 'blogPosts' is set, it becomes an array of objects.
<template>
<div>
<div class="bw-blog-card" v-for="post in blogPosts" :key="post.id">
<div class="bw-blog-card__profile"></div>
<div class="bw-top-blog__top-card">
<div>
creator: {{ post.username }}
</div>
<div>
{{ post.created_at }}
</div>
<div class="bw-blog-card__card-title">
{{ post.title }}
</div>
<div>
{{ post.description }}
</div>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data: () => {
return {
blogPosts: []
}
},
methods: {
getBlogPosts: async () => {
try {
let { data } = await axios.get(`/devblog`)
this.blogPosts = data.data
console.log(this.blogPosts)
}
catch (error) {
console.error(error)
}
}
},
created() {
this.getBlogPosts();
}
}
</script>
If I manually assign 'blogPosts' as an array of objects, everything works fine. Any idea why it's not working when fetched through an API call?