I've created a BaseDataTable that uses a <v-data-table>
with a couple of props setted by default:
<template>
<div>
<v-container fluid>
<v-data-table
dense
<!-- other props -->
></v-data-table>
</v-container>
<!-- utilities -->
</div>
</template>
When I tried it I found out I wasn't able to use:
<template #[`item.name`]="{ value }">
<span>custom dessert name rendering {{ value }}</span>
</template>
I found on stackoverflow that I had to add these lines of code to my BaseDataTable component (stackoverflow link):
<template>
<div>
<v-container fluid>
<v-data-table
dense
<!-- other props -->
>
<template
v-for="(_, name) in $scopedSlots"
#[name]="slotData"
>
<slot
:name="name"
v-bind="slotData"
></slot>
</template>
</v-data-table>
</v-container>
<!-- utilities -->
</div>
</template>
Now let's say every time I have a #[item.name]
I want a precise render, how can I achieve this result? I'll write some pseudo code to help you better understand my point:
<template>
<div>
<v-container fluid>
<v-data-table
dense
<!-- other props -->
>
<template
v-for="(_, name) in $scopedSlots"
#[name]="slotData"
>
<span v-if="name === 'item.name'">
custom name rendering {{ name }}
</span>
<slot
v-else
:name="name"
v-bind="slotData"
></slot>
</template>
</v-data-table>
</v-container>
<!-- utilities -->
</div>
</template>