在数组VueJS中显示对象

Question

所以我使用的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 }}

我不显示类别的名称。我真的很想显示帖子中每个类别的名称，但似乎无法正确显示。

EDIT：还有我在VueJS中使用的数据属性，并且正在将JSON对象设置为该属性。

Answer 1

您应该在与析构函数的组合中使用map方法。

<div v-for="post in posts">
<div>{{ post.categories.data.map(({name}) => name).join(' ') }}</div>
</div>