Отображение объектов в массиве 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: также posts - это свойство данных, которое я использую в VueJS, и я устанавливаю объект JSON, чтобы он стал этим свойством.

Answer 1

Вы должны использовать map метод в сочетании с деструктурой .

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