如何使用v-for为多个插槽创建插槽内容

Question

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

<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变量中使用该索引值。像这样的东西是伪代码：

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

我该怎么做？v-for给我以下错误：

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

Answer 1

您的"伪代码"；几乎是对的。。。

这应该有效：

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

在时隙内容(<template>(上不允许或不需要key，即使它在v-for中。将其移除或放置在ScheduleIcon组件上。。。