The image linked to the content of Content cannot be displayed as vue.Error—Cannot read property 'fields' of undefined (Cannot get image)

I want to create an article in Contentful and retrieve it in vue, but I can't get an image linked to the article...
(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

*This is a textbook for techpit. (I have contacted the manufacturer, but I have not heard from them, so I will also post it here.)
Affected pages: https://www.techpit.jp/courses/28/curriculums/29/sections/249/parts/855

▼Error code the problem code

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

▼ Full all

<!--pages/index.vue-->

<template>
  <div>
    <div 
      v-for="work in works"
      :key="work.sys.id"
      class="w-full m-2pb-3bg-white overflow-hidden shadow-lg"
    >
      <div class="absolute bg-white py-1px-3 rounded shadow mt-1ml-1text-sm">
        {{ work.fields.category.fields.name}}
      </div>
      <div 
        class="mb-3w-full h-64bg-center bg-cover"
        :style="'background-image:url('+work.fields.image.fields.file.url+')'"
      ></div>
      <h3class="ml-3font-bold">{{work.fields.title}}</h3>
      <h4class="ml-3 my-2text-xs">{{work.fields.subtitle}}</h4>
      <div class="flexml-2">
        <li 
          v-for="tag in work.fields.tag"
          :key="tag.sys.id"
          class="list-none text-xsm-1bg-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: Get all article data of 'work', // work type
        order: '-sys.createdAt', // Order by creation date and time
      }),
    ])
      .then([works])=>{
        console.log(works.items)
        US>return{
          works:works.items, // Put the retrieved data into the array works
        }
      })
      .catch(console.error)
  },
}
</script>

▼ console.log(works.items)

 [21:26:43]
  {
    sys:{
      space —Object,
      id: '4GGdVzFpAP9wYcZujWql7f',
      type: 'Entry',
      createdAt: '2020-08-20T 13:53:41.300Z',
      updatedAt: '2020-08-20T 13:53:41.300Z',
      environment:Object,
      revision: 1,
      contentType: Object,
      locale: 'en-US'
    },
    fields: {
      title: 'Ice',
      subTitle: 'Chocolate Monaka Jumbo',
      date: '2020-08-05T00:00 + 09:00',
      category —Object,
      tag: Array,
      content: 'Delicious!'
    }
  },
  {
    sys:{
      space —Object,
      id: '61 SVTRr1VpZbkFX8bdi4P3',
      type: 'Entry',
      createdAt: '2020-08-20T 13:51:50.745Z',
      updatedAt: '2020-08-20T 13:51:50.745Z',
      environment:Object,
      revision: 1,
      contentType: Object,
      locale: 'en-US'
    },
    fields: {
      title: 'Bread',
      subTitle: 'Melon bread',
      category —Object,
      content: 'Birds of prey laboratory'
    }
  },
  {
    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: 'Bunbirds',
      subTitle: 'White Moonbird',
      date: '2020-08-19T00:00 + 09:00',
      category —Object,
      tag: Array,
      content: 'White bird is cute!\n'
    }
  }
]

▼Environment
Mac OS

vue.js

2022-09-30 21:49

1 Answers

In the variable work that looped the works,
The variable fields does not hang, so it appears to be an error.

work itself is undefined, so there should be no sys as well as fields.
Error: Cannot read property 'sys' of undefined error was not received only after the evaluation order.

If works was an empty array, it would not be in the loop in the first place, so it has some value.

As far as the console.log shows, the variable fields appears to be hanging.

However, even if console.log() shows as an array of objects,
works.itemsI don't know if one element of the array is really an object type.

As far as the contents of the returned data are concerned, it seems that the DB operation is involved.
It may be a proprietary class type of library used for DB operations, not an object type.
If so, fields will not be accessible.

Verify that each element type in works.items is really an object type.

2022-09-30 21:49

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656