0
0 Comments

I have a table in vuetify where I want to create a template for 14 of the columns. Instead of making 14 different templates like this:

    <v-data-table disable-pagination
        :headers="headers"
        :items="users"
        :search="search"
        :hide-default-footer="true"
    >

        <template v-slot:[`item.date_0`]="{ item }">
            <ScheduleIcon :item="item.date_0" />
        </template>

        <template v-slot:[`item.date_1`]="{ item }">
            <ScheduleIcon :item="item.date_1" />
        </template>

        <template v-slot:[`item.date_2`]="{ item }">
            <ScheduleIcon :item="item.date_2" />
        </template>

    </v-data-table>

I want to make a v-for loop with an index from 0-13 and at the same time use that index-value in the slot and props variables. Something like this is pseudo-code:

            <template v-slot:[`item.date_INDEX`]="{ item }" v-for="index in 13" :key="index">
                <ScheduleIcon :item="item.date_INDEX" />
            </template>

How would I do this? The v-for give me the following error:

<template> cannot be keyed. Place the key on real elements instead.
Anonymous Asked question May 14, 2021