我有一个返回对象数组的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。我得到的错误信息是 "Cannot read property 'authorName' of undefined"。
我用了你的代码
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>
他给了我想要的结果,价值出现了。