

Contentfulで記事を作成し、vueで取得したいのですが、記事に紐づく画像が取得できません...  
（I created articles with Contentful and get them with Vuex. But, I can't get
the image associated with the article ...）

[code]

    Error：Cannot read property 'fields' of undefined
    
[/code]

※techpitの教材です。（製作者に問い合わせしていますが連絡がないため、こちらにも投稿します。）  
該当ページ：https://www.techpit.jp/courses/28/curriculums/29/sections/249/parts/855

▼エラーが出てしまうコード the problem code

[code]

    <div 
        class="mb-3 w-full h-64 bg-center bg-cover"
        :style=" 'background-image: url(' + work.fields.image.fields.file.url + ')' "
    >
    </div>
    
[/code]

▼全体 all

[code]

    <!-- 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>
    
[/code]

▼console.log(works.items)

[code]

    [                                                                                                            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'
        }
      }
    ]
    
[/code]

[![error](https://i.stack.imgur.com/Q8vca.png)](https://i.stack.imgur.com/Q8vca.png)  
[![contentful](https://i.stack.imgur.com/CX14Z.png)](https://i.stack.imgur.com/CX14Z.png)

▼環境  
Mac OS


CC BY-SA 4.0
2020-09-20T12:39:02.300
70563
2020-09-24T04:15:28.850
2020-09-20T18:15:26.480
3068
30755
question
vue.js
Contentfulのcontentに紐づくimageをvueで表示することができません。。Error：Cannot read property 'fields' of undefined （Cannnot get image ）


`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` 内の各要素の型が、本当にオブジェクト型かを確認してください。


CC BY-SA 4.0
2020-09-24T04:15:28.850
70656
2020-09-24T04:15:28.850
41938
70563
answer