Contentfulで記事を作成し、vueで取得したいのですが、記事に紐づく画像が取得できません...
(I created articles with Contentful and get them with Vuex. But, I can't get the image associated with the article ...)
Error:Cannot read property 'fields' of undefined
※techpitの教材です。(製作者に問い合わせしていますが連絡がないため、こちらにも投稿します。)
該当ページ:https://www.techpit.jp/courses/28/curriculums/29/sections/249/parts/855
▼エラーが出てしまうコード the problem code
<div
class="mb-3 w-full h-64 bg-center bg-cover"
:style=" 'background-image: url(' + work.fields.image.fields.file.url + ')' "
>
</div>
▼全体 all
<!-- pages/index.vue -->
<template>
<div>
<div
v-for="work in works"
:key="work.sys.id"
class="w-full m-2 pb-3 bg-white overflow-hidden shadow-lg"
>
<div class="absolute bg-white py-1 px-3 rounded shadow mt-1 ml-1 text-sm">
{{ work.fields.category.fields.name }}
</div>
<div
class="mb-3 w-full h-64 bg-center bg-cover"
:style=" 'background-image: url(' + work.fields.image.fields.file.url + ')' "
></div>
<h3 class="ml-3 font-bold">{{ work.fields.title }}</h3>
<h4 class="ml-3 my-2 text-xs">{{ work.fields.subtitle }}</h4>
<div class="flex ml-2">
<li
v-for="tag in work.fields.tag"
:key="tag.sys.id"
class="list-none text-xs m-1 bg-gray-200 p-1 rounded"
>
{{ tag.fields.name }}
</li>
</div>
</div>
</div>
</template>
<script>
import { createClient } from '~/plugins/contentful.js'
const client = createClient()
export default {
asyncData() {
return Promise.all([
client.getEntries({
content_type: 'work', // workタイプの記事データを全取得
order: '-sys.createdAt', // 作成日時順に並べる
}),
])
.then(([works]) => {
console.log(works.items)
return {
works: works.items, // 取得したデータを配列worksに入れる
}
})
.catch(console.error)
},
}
</script>
▼console.log(works.items)
[ 21:26:43
{
sys: {
space: [Object],
id: '4GGdVzFpAP9wYcZujWql7f',
type: 'Entry',
createdAt: '2020-08-20T13:53:41.300Z',
updatedAt: '2020-08-20T13:53:41.300Z',
environment: [Object],
revision: 1,
contentType: [Object],
locale: 'en-US'
},
fields: {
title: 'アイス',
subTitle: 'チョコモナカジャンボ',
date: '2020-08-05T00:00+09:00',
category: [Object],
tag: [Array],
content: '美味しい!'
}
},
{
sys: {
space: [Object],
id: '61SVTRr1VpZbkFX8bdi4P3',
type: 'Entry',
createdAt: '2020-08-20T13:51:50.745Z',
updatedAt: '2020-08-20T13:51:50.745Z',
environment: [Object],
revision: 1,
contentType: [Object],
locale: 'en-US'
},
fields: {
title: 'パン',
subTitle: 'メロンパン',
category: [Object],
content: '猛禽類研究所'
}
},
{
sys: {
space: [Object],
id: '37g2gRzX3Vtcn4uU456vJM',
type: 'Entry',
createdAt: '2020-08-20T13:37:33.876Z',
updatedAt: '2020-08-20T13:40:53.794Z',
environment: [Object],
revision: 2,
contentType: [Object],
locale: 'en-US'
},
fields: {
title: '文鳥',
subTitle: '白文鳥',
date: '2020-08-19T00:00+09:00',
category: [Object],
tag: [Array],
content: '白文鳥、かわいい!\n'
}
}
]
▼環境
Mac OS