Доступ к вложенным объектам в цикле v-for

Question

У меня есть API, который возвращает массив объектов. Каждый объект в массиве выглядит следующим образом.

{
    id: 6,
    typeTitle: 'Type Title goes here',
    typeImg: 'Some image',
    typeLink: 'https://www.somewebsite.com',
    publishDate: 'Apr 24, 2020',
    typeAuthor: {
      id: 3,
      authorName: 'Pat wilson',
      created_at: '2020-04-24T14:03:54.140Z',
      updated_at: '2020-04-24T14:03:54.140Z'
    },
    stage: {
      id: 1,
      stageTitle: 'Revolve Stage',
      created_at: '2020-04-24T14:11:55.364Z',
      updated_at: '2020-04-24T14:11:55.364Z'
    },
    created_at: '2020-04-24T13:56:01.607Z',
    updated_at: '2020-04-24T14:17:13.543Z',
    categories: []
  }

Я использую v-for l oop для рендеринга массива таких объектов. Я не могу получить доступ ни к одному из вложенных объектов.

<div v-for="(type, index) in types" :key="index">
            <div>
                <img :src="type.typeImg" />
                <div>
                    <p>{{type.typeTitle}} </p>

                    <p>{{type.typeAuthor.authorName}}</p>
                    <div>
                        <template v-for="cat in type.categories">
                            <span :key="cat.categoryName">{{cat.categoryName}}</span>
                        </template>
                    </div>
                </div>
            </div>
        </div>

У меня нет доступа к authorName. Я получаю сообщение об ошибке: «Не удается прочитать свойство authorName из undefined»

Answer 1

Я использовал ваш код

           types:[
                {
                    id: 6,
                    typeTitle: 'Type Title goes here',
                    typeImg: 'Some image',
                    typeLink: 'https://www.somewebsite.com',
                    publishDate: 'Apr 24, 2020',
                    typeAuthor: {
                    id: 3,
                    authorName: 'Pat wilson',
                    created_at: '2020-04-24T14:03:54.140Z',
                    updated_at: '2020-04-24T14:03:54.140Z'
                    },
                    stage: {
                    id: 1,
                    stageTitle: 'Revolve Stage',
                    created_at: '2020-04-24T14:11:55.364Z',
                    updated_at: '2020-04-24T14:11:55.364Z'
                    },
                    created_at: '2020-04-24T13:56:01.607Z',
                    updated_at: '2020-04-24T14:17:13.543Z',
                    categories: []
                }
        ]


                        <div v-for="(type, index) in types" :key="index">
                        <div>
                            <img :src="type.typeImg" />
                            <div>
                                <p>{{type.typeTitle}} </p>

                                <p>{{type.typeAuthor.authorName}}</p>
                                <div>
                                    <template v-for="cat in type.categories">
                                        <span :key="cat.categoryName"> 
                                   {{cat.categoryName}}</span>
                                    </template>
                                </div>
                            </div>
                        </div>
            </div>

Он дал мне желаемый результат, и значение появилось