how can i use a slot inside a v-for to customize each column of a data-table?

Question

in this example of vuetify documentation for data-tables as described ~~here~~, to customize the calories column we’re using the item.calories slot:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.calories="{ item }">
        <v-chip
          :color="getColor(item.calories)"
          dark
        >
          {{ item.calories }}
        </v-chip>
      </template>
    </v-data-table>
  </v-app>
</div>

but i need v-for to customize all the columns, so that it can be something like:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <v-for :list="headers">
        <template v-slot:item.header="{ item }">
          <v-chip
            :color="getColor(item.header)"
            dark
          >
            {{ item.calories }}
          </v-chip>
        </template>
       </v-for>
    </v-data-table>
  </v-app>
</div>

Unfortunately, this is not working.

Does anybody know how can I deal with this issue?

Thanks in advance!

You can use the `item` slot where you can freely put TR and whatever TD you need. Of course you should order your TDs in the same order as listed in the `headers` prop. — IVO GELOV, Jul 11 '22 at 14:57

Ibrahim Zanbily · Accepted Answer · 2022-07-12T14:23:51.803

0

You can acheive that by using the 'slot' prop instead of the v-slot directive as the following example:

<v-chip
 v-for="header in headers" 
 :key="header.value" 
 :slot="`item.${header.value}`" 
 slot-scope="{item}"
>
    {{ item[header.value] }}
</v-chip>

note that you should replace teh value key that I'm using with the identifier key of each column object in your code.

edited Jul 12 '22 at 14:23

answered Jul 12 '22 at 14:22

Ibrahim Zanbily

61
3

score 0 · Answer 2 · answered Jul 07 '23 at 08:28

This works also within the <template> (we are using this in Vue 2). There is no need for the slot prop:

<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1">
      <template v-for="header in headers" #[`item.${header.value}`]="{value}">
        {{ value + " foo" }}
      </template>
    </v-data-table>
  </v-app>
</div>

Codepen: https://codepen.io/StefanBrand/pen/vYQemre

how can i use a slot inside a v-for to customize each column of a data-table?

2 Answers2