Как отфильтровать массив объектов по ключам?

Question

[fessss]

Каким образом я могу вывести массив объектов отфильтрованный по ключу в компоненте v-expansion-panels?
Есть такой компонент

<v-expansion-panels>
    <v-expansion-panel
      v-for="(item,i) in arr"
      :key="i"
    >
      <v-expansion-panel-header>
        {{ item.group }}
      </v-expansion-panel-header>
      <v-expansion-panel-content></v-e{{item.name}}xpansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>

И есть такой массив

const arr = [
    {
        name: 'name1',
        group: 'test1',
    },
    {
        name: 'name2',
        group: 'test1',
    },
    {
        name: 'name3',
        group: 'test1',
    },
    {
        name: 'name4',
        group: 'test2',
    },
    {
        name: 'name5',
        group: 'test2',
    },
    {
        name: 'name6',
        group: 'test2',
    },
]

Нужно вывести так, чтобы в под одной вкладкой были объекты с одинаковым group.

test1 => name1, name2, name3
test2 => name4, name5, name6

Comments

[Kovalsky]

v-for="(group,i) in groups" ?

Answer 1

[0xD34F]

computed: {
  grouped() {
    return this.arr.reduce((acc, n) => ((acc[n.group] ??= []).push(n), acc), {});
  },
},

<v-expansion-panels>
  <v-expansion-panel v-for="(items, groupName) in grouped">
    <v-expansion-panel-header>{{ groupName }}</v-expansion-panel-header>
    <v-expansion-panel-content>
      <div v-for="n in items">{{ n.name }}</div>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

Comments

[fessss]

0xD34F я прошу прощения, а как можно объект, который получается на выходе еще и отсортировать по group.id?
Если допустим будет не group: 'name', a
group: {name: '', id: ''}

[0xD34F]

Очень просто. Но я вам ничего говорить не буду до тех пор, пока вы не исправите вопрос - он правила (3.4, 3.6) нарушает, и меня это сильно бесит.

[fessss]

0xD34F, поправил вопрос

[0xD34F]

Не до конца.

[fessss]

0xD34F, ну вроде точно теперь =)

[0xD34F]

grouped() {
  return Object
    .entries(this.arr.reduce((acc, n) => {
      (acc[n.group.id] ??= { ...n.group, items: [] }).items.push(n);
      return acc;
    }, {}))
    .sort((a, b) => a[0] - b[0])
    .map(n => n[1]);
},

[fessss]

0xD34F, Спасибо!