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

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. Чего на самом деле хотел автор вопроса, вынесено из комментариев:

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

Добавляем ещё одно вычисляемое свойство - массив категорий:

categories() {
  return Object.keys(this.groupedPosts);
},

И обычное свойство - выбранная категория:

data: () => ({
  activeCategory: null,
  ...

На основе массива категорий создаём кнопки, по нажатию на которые будет производиться выбор категории:

<button
  v-for="n in categories"
  v-text="n"
  :class="{ active: n === activeCategory }"
  @click="activeCategory = n"
></button>

Если категория выбрана - показываем соответствующие посты:

<div v-if="activeCategory">
  <div v-for="n in groupedPosts[activeCategory]" class="post">
    ...

https://jsfiddle.net/yxf50qg2/

Comments

[Андрей]

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

[0xD34F]

ЗАЧЕМ?

[Андрей]

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

[0xD34F]

А сразу вопрос полностью задать - нет, никак?

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