Динамические данные в таблицу Vuetify?

Question

[Максим]

У меня есть данные items:

{
    "name": "Отдел 1",
    "departmentKey": "web",
    "m1": 45,
    "color": "GOOD",
    "m2": 85,
    "color2": "GOOD",
}
{
    "name": "Отдел 2",
    "departmentKey": "devops",
    "m1": 78,
    "color1": "GOOD",
    "m2": 58,
    "color2": "GOOD",
}

Каждый item это строка в таблице.

Я отображаю таблицу вот таким образом:

<v-data-table
    :headers="headers"
    :items="items"
    hide-default-footer
    disable-pagination
    class="metrics-table"
    disable-sort
    @click:row="handleClick"
  >
    <template v-slot:item.m1="{ item }">
      <v-chip :color="colors[item.color1]" dark>
        {{ item.m1 }}
      </v-chip>
    </template>
    <template v-slot:item.m2="{ item }">
      <v-chip :color="colors[item.color2]" dark>
        {{ item.m2 }}
      </v-chip>
    </template>
  </v-data-table>

Пример: тут

Поля m1, m2, color1, color2 динамические и их может быть сколько угодно. Но в template я хардкодом должен каждый раз руками добавлять. Как сделать, чтобы он динамически бежал по этим полям и сам отрисовывал template?

Comments

[Алексей Ярков]

А количество m* и color* всегда будет совпадать? Вообще сделайте пример в песочнице, на том же codesandbox. Так шансов помощи больше. У меня вот мысль есть, но пилить пример лениво ))

[Максим]

Алексей Ярков, да. m* и color* всегда соответствуют друг другу. То есть m1 и color1 это совместные данные. Сейчас попробую накидать в песочницу

[Максим]

Алексей Ярков, Накидал вот тут

Answer 1

[0xD34F]

Зачем делать свойства элементов metrics свойствами родительских объектов? Передавайте данные в компонент с таблицей как есть. Добавьте только к соответствующим элементам headers свойство, которое будет указывать, что этот столбец должен отображать данные из вложенного массива metrics, типа metricsColumn: true.

В компоненте таблицы получаете список этих столбцов:

computed: {
  metricsColumns() {
    return this.headers.filter(n => n.metricsColumn);
  },
},

И динамически формируете под них слоты:

<template
  v-for="(n, i) in metricsColumns"
 #[`item.${n.value}`]="{ item: { metrics: { [i]: item } } }"
>
  <v-chip
    :color="colors[item.metricsValueMarkName]"
    :key="n.value"
    dark
  >
    {{ item.metricsValue }}
  </v-chip>
</template>

https://codesandbox.io/s/for-httpsqnahabrcomq95964...