<!-- DataTable.vue -->
<template>
<v-data-table
class="elevation-1"
v-bind="$attrs"
v-on="$listeners"
dense
></v-data-table>
</template>
As you can see, I created a component which wraps <v-data-table>
. I was wondering, why if I use it I'm not able to access the item slots?
<!-- PeopleView.vue -->
<template>
<v-container>
<DataTable
:headers="headers"
:items="people"
>
<template #item.fullName="{ value }">
<b>{{ value }}</b>
</template>
</DataTable>
</v-container>
</template>
To use item slots you must "override" slots and scoped slots.
<!-- DataTable.vue -->
<template>
<v-data-table
...
>
<template v-for="(_, name) in $slots">
<template :slot="name">
<slot :name="name"></slot>
</template>
</template>
<template
v-for="(_, name) in $scopedSlots"
#[name]="data"
>
<slot
:name="name"
v-bind="data"
></slot>
</template>
</v-data-table>
</template>