javascript - 在数组 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 }}

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

编辑:另外发布的是我在 VueJS 中使用的数据属性，并将 JSON 对象设置为该属性。

Answer 1

您应该将map 方法与解构 结合使用。

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