0

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'
    }
  }
]

error
contentful

▼環境
Mac OS

1
  • 当サイトは日本語でのやり取りを想定したサイトですので、英語の併記は基本的に不要です。
    – cubick
    Commented 2020年9月20日 15:11

1 件の回答 1

0

works をループさせた変数 work に、
fields という変数がぶら下がっていないため、エラーになっているようです。

work 自体が undefined になっているので、fields だけでなく sys もないはずです。
Error:Cannot read property 'sys' of undefined というエラーにならなかったのは、単に評価の順番が後だったのでしょう。

もし works が空配列だったならば、そもそもループに入らないので、何かしら値は入っています。

 
console.log に内容を見る限り、fields という変数はぶら下がっているように見えます。

ただ、console.log() でオブジェクトの配列かのように表示されていても、
works.items 配列の1要素1要素が本当にオブジェクト型かは分かりません。

返ってくるデータの中身を見る限り、DB操作が絡んでいるようです。
オブジェクト型でなく、DB操作用に使われたライブラリの独自クラスの型の可能性があります。
その場合、fields ではアクセスできません。

works.items 内の各要素の型が、本当にオブジェクト型かを確認してください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。