Dynamic data to Vuetify table?

Question

Vue.js

I have items data:

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

Each item is a row in the table.

I display the table like this:

<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>

Example: here

Fields m1, m2, color1, color2 are dynamic and there can be any number of them. But in the template, I have to add a hardcode every time with my hands. How can I make it dynamically run through these fields and draw the template itself?

Answer 1

Why make properties of metrics elements properties of parent objects? Pass the data to the component with the table as is. Only add a property to the appropriate headers elements to indicate that this column should display data from a nested metrics array, such as . In the table component, get a list of these columns:metricsColumn: true

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

And dynamically create slots for them:

<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...