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循环渲染此类对象的数组。我无法访问任何嵌套对象。

<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'”

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>

他给了我想要的结果，并且价值出现了

在v-for循环中访问嵌套对象

1 个答案: