Question

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

但是，我希望能够生成一个组件并使用道具来避免对同一事物进行三遍修改

是否有一种方法可以在vuetify（带有v槽动态）中循环使用带有数据表的模板？

例如：


<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

Fix: require-v-for-key shouldn't be raised on slots

vue-language-server : Elements in iteration expect to have 'v-bind:key' directives

谢谢

编辑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': [] },

Vuejs和Vuetify：是否可以通过Vuetify（带有V槽动态）在带有数据表的模板上循环？

1 个答案: