嘿,我正在用 Nuxt 和 storyblock 作为 CMS 做一个博客。第一次使用两者。一切正常,但图像未呈现显示错误:
GET http://localhost:3000/undefined 500 (NuxtServerError) 2commons.app.js:11367 [Vue 警告]:无效的道具:道具“thumbnailImage”的类型检查失败。预期值为“未定义”的字符串,得到未定义
在发现
<PostPreview> at components/Blog/PostPreview.vue
<Pages/index.vue> at pages/index.vue
<Nuxt>
<Default> at layouts/default.vue
<Root>
但是如果我去控制台查看每个帖子中的数据,缩略图就在那里并且链接有效。有人可以在这里指导我吗?谢谢
所以在我的 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>
接着
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
};
})
};
});
}