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

【问题标题】：How to use v-for to create slot content for multiple slots如何使用 v-for 为多个插槽创建插槽内容
【发布时间】：2021-05-13 14:32:17
【问题描述】：

我在 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.

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你的“伪代码”几乎是对的……

这应该可行：

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

key 在槽内容 (<template>) 上是不允许或不需要的，即使它在 v-for 中也是如此。将其移除或放置在ScheduleIcon 组件上...

【讨论】：