[英]Displaying Objects in an Array VueJS
所以我使用了一个看起来像这样的JSON
对象:
data: [
{
title: "Post Title One",
categories: {
data: [
{
id: 1,
name: "Category Name 1"
}
]
}
},
{
title: "Post Title Two",
categories: {
data: [
{
id: 2,
name: "Category Name 1"
},
{
id: 3,
name: "Category Name 2"
}
]
}
}
]
我想获取每个帖子的所有类别并使用 Vue 显示它们。 所以我目前拥有的是:
<div v-for="post in posts">
<div>{{ post.categories.data }}</div>
</div>
在那个{{ post.categories.data }}
我试图显示来自JSON
对象的类别名称。 当我使用上面的内容时,整个数组都显示在 div 中。 当我尝试做类似的事情时
{{ post.categories.data.name }}
或者
{{ post.categories.data[0].name }}
我不显示类别的名称。 我真的很想显示帖子的每个类别的名称,但似乎无法正确显示。
编辑:还发布了我在VueJS
使用的数据属性, VueJS
JSON
对象设置为该属性。
您应该将map
方法与destructuring 结合使用。
<div v-for="post in posts">
<div>{{ post.categories.data.map(({name}) => name).join(' ') }}</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.