Vuejs & Vuetify : Is there a way to loop around template with datatable from vuetify (with v-slot dynamic)?

Question

I have several datatable with server-side pagination, search fields and filterable fields

However, I would like to be able to generate a component and use the props to avoid modifying the same thing three times

Is there a way to loop around template with datatable from vuetify (with v-slot dynamic) ?

for example :


<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>

Become (not functional) :

<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>

If i add the key , i have '<template>' cannot be keyed. Place the key on real elements instead

and if i remove this i have Elements in iteration expect to have 'v-bind:key' directives

However I came across several sources that demonstrate the opposite

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

Thank you

Edit 20/12 :

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

How can I make the v-slot attribute dynamically with the vuetify data table ?

Here is my code :

<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>

It cannot be mounted on the table column

I need to use v-slot:header.id="{header}" for the mounted on the id column but I have to make id dynamic according to my loop

how to do ?

Thank you

I find it

I added head: 'header.id' in my list so i can use <template v-for="(head, i) in headers" v-slot:[headers[i].head]="{header}">

manuel-84 manuel-84 · Accepted Answer · 2020-07-16T12:58:41

I had to do

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

in my case

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

Vuejs & Vuetify : Is there a way to loop around template with datatable from vuetify (with v-slot dynamic)?

1 Answers