@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
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 февр. 2021, в 01:35
200000 руб./за проект
28 февр. 2021, в 00:22
2500 руб./за проект
27 февр. 2021, в 22:14
30000 руб./за проект