如何使用 v-for 为多个插槽创建插槽内容 [英] How to use v-for to create slot content for multiple slots

问题描述

我在 vuetify 中有一个表，我想在其中为 14 列创建模板.而不是像这样制作 14 个不同的模板:

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>

我想用 0-13 的索引创建一个 v-for 循环，同时在 slot 和 props 变量中使用该索引值.像这样的东西是伪代码:

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>

我该怎么做?v-for 给我以下错误:

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

<template> cannot be keyed. Place the key on real elements instead.

推荐答案

您的伪代码"几乎是正确的...

Your "pseudo code" is almost right...

这应该有效:

<template v-slot:[`item.date_${index-1}`]="{ item }" v-for="index in 14">
  <ScheduleIcon :item="item[`date_${index-1}`]" :key="index" />
</template>

插槽内容 (