Hei, I am doing a blog with Nuxt and storyblock as CMS. First time using both. Everything works but the image doesn't render showing the error:
GET http://localhost:3000/undefined 500 (NuxtServerError) 2commons.app.js:11367 [Vue warn]: Invalid prop: type check failed for prop "thumbnailImage". Expected String with value "undefined", got Undefined
found in
<PostPreview> at components/Blog/PostPreview.vue
<Pages/index.vue> at pages/index.vue
<Nuxt>
<Default> at layouts/default.vue
<Root>
But if I go to the console and see the data in each post, the thumbnail is there and the link works. Can someone guide me here? Thank you
So in my index.vue :
<template>
<section id="posts">
<postPreview
v-for="post in posts"
:key="post.id"
:title="post.title"
:excerpt="post.previewText"
:thumbnailImage="post.thumbnailUrl"
:id="post.id"
/>
</section>
</template>
and then
asyncData(context) {
return context.app.$storyapi
.get('cdn/stories', {
version: 'draft',
starts_with: 'blog/'
})
.then(res => {
console.log(res)
return {
posts: res.data.stories.map(bp => {
return {
id: bp.slug,
title: bp.content.title,
previewText: bp.content.summary,
thumbnailUrl: bp.content.thumbnail
};
})
};
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.