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

Question

我在 vuetify 中有一个 table，我想在其中为 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 循环，同时在插槽和 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 组件上...

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

How to use v-for to create slot content for multiple slots

vue.js

vuetify.js