Как создать массив с объектами из другого массива?

Question

[Андрей]

Во vue есть массив с объектами:

posts: [
    {
      title: 'Тестовый пост',
      content: 'lorem lorem',
      category: 'lifestyle'
    },
    {
      title: 'Тестовый пост',
      content: 'lorem lorem',
      category: 'lifestyle'
    },
    {
      title: 'Тестовый пост',
      content: 'lorem lorem',
      category: 'business'
    },
    {
      title: 'Тестовый пост',
      content: 'lorem lorem',
      category: 'travel'
    },
    {
      title: 'Тестовый пост',
      content: 'lorem lorem',
      category: 'travel'
    },
  ]
}
Нужно создать отдельный массив с постами каждой отдельной категории (travel, lifestyle, business). Как это лучше сделать?

Answer 1

[0xD34F]

computed: {
  groupedPosts() {
    return this.posts.reduce((acc, n) => {
      (acc[n.category] = acc[n.category] || []).push(n);
      return acc;
    }, {});
  },
},

UPD. Чего на самом деле хотел автор вопроса, вынесено из комментариев:

При нажатии на название категории хочу выводить посты и соответствующего массива.

Делаете два computed свойства - массив категорий, и массив постов выбранной категории, как-то так.

Comments

[Андрей]

Благодарю. А как поместить результат в data?

[0xD34F]

AndrewRusinas, ЗАЧЕМ?

[Андрей]

0xD34F, есть массив, из которого циклически выводятся все посты. При нажатии на название категории хочу выводить посты и соответствующего массива.
Я с computed только сегодня познакомился, поэтому не до конца понимаю как и когда они используются.

[0xD34F]

AndrewRusinas,

При нажатии на название категории хочу выводить посты и соответствующего массива.

Вам не кажется, что это должно было быть в тексте вопроса? А то как-то так получилось, что надо вам одно, а спросили вы другое.

Дополнил ответ.