Vuejs & Vuetify：有没有办法用来自 vuetify 的数据表（带有 v-slot 动态）来循环模板？

Question

我有几个带有服务器端分页、搜索字段和可过滤字段的数据表

但是，我希望能够生成一个组件并使用道具来避免修改相同的东西三次

有没有办法用来自 vuetify 的数据表（使用 v-slot dynamic）来循环模板？

例如 ：

<template v-slot:header.id="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('id')">
            ID
            <v-icon class="ml-2">{{icon.id}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_id.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>


<template v-slot:header.name="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('name')">
            Nom du ticket
            <v-icon class="ml-2">{{icon.name}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_name.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

成为（非功能性）：

<template v-for="(item, i) in headers" v-slot:item.text="{ header }">
    <div class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy(item.name)">
            {{item.name}}
            <v-icon class="ml-2">{{icon[item.name]}}</v-icon>
        </span>
        <v-text-field v-model="item.searcher" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

如果我添加key，我有'<template>' cannot be keyed. Place the key on real elements instead

如果我删除这个我有 Elements in iteration expect to have 'v-bind:key' directives

然而，我遇到了几个证明相反的来源

https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

修复：不应在插槽上提出 require-v-for-key

vue-language-server ：迭代中的元素期望有 'v-bind:key' 指令

谢谢

编辑 20/12 ：

https://github.com/vuejs/eslint-plugin-vue/issues/1006

如何使用 vuetify 数据表动态创建 v-slot 属性？

这是我的代码：

<template v-for="(head, i) in headers" v-slot:header[header.value]="{header}">
    <div :key="i" class="pointer border-right pa-2">
        <span class="title" @click.prevent="sortBy('id')">
            {{head}} <br> {{header}}
            <v-icon class="ml-2">{{icon.id}}</v-icon>
        </span>
        <v-text-field v-model="searcher.ticket_id.value" type="text"
                label="Rechercher..."></v-text-field>
    </div>
</template>

不能安装在桌子立柱上

我需要v-slot:header.id="{header}"用于安装在 id 列上，但我必须id根据我的循环进行动态

怎么做 ？

谢谢

我找到它了

我添加head: 'header.id'到我的列表中以便我可以使用<template v-for="(head, i) in headers" v-slot:[headers[i].head]="{header}">

Answer 1

我必须做

<template v-for="(col, i) in filters" v-slot:[`header.${i}`]="{ header }">

就我而言

filters: { 'name': [], 'calories': [] },