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

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

CodePudding user response：

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.