Как взять первые 5 элементов в каждой категории?

Question

[Erl]

<template v-for="article in articles">
          <article
            v-if="article.category.name == data.name"
            :key="article.id"
            class="article-thumb"
          >

Есть такой код, тут я раскидываю артиклы по категориям, как можно остановить вывод статей если в категории уже 5 шт, я бы мог написать что то вроде v-for="article in articles.slice(0, 5)", но категорий то больше чем 1, да и точно узнать никак не получится, так как разное количество статей в категориях

Comments

[0xD34F]

но категорий то больше чем 1

А какое это имеет значение? Отображаться всё равно будут элементы только одной категории. Потому что

v-if="article.category.name == data.name"

Где-то вы сильно врёте, или чего-то недоговариваете.

[Erl]

0xD34F, кажется вы вырываете фразу из контекста, я пишу, что не могу использовать метод slice, так как он срежет первые 5 элементов, не понимая что относится к какой либо категории

Answer 1

[ReaverJS]

Что то вроде:
StackOverflow

let articlesGroups = articles.reduce((articles, item) => {
  let article = (articles[item.category] || []);
  article.push(item);
  articles[item.category] = article;
  return articles;
}, {});

Дальше уже обходите articlesGroups - 2-я циклами. Внешний - обходит группы, внутренний - статьи. Во внутреннем как раз ставите ограничение на 5 статей.