Using the setup syntax, I started a new projet week ago and when I try to use "slots" in the template or even a computed with useSlots. The slots variable is always empty even if the v-slots are working great (passing datas like I want).
<DatatableGeneric
title="Liste de clients (API)"
:headers="headers"
:data="apiResponse.results"
:loading="loading"
:serverItemsLength="apiResponse.count"
v-model:options="tableOptions"
@selected="updateSelected"
:show-select="showSelect"
sort-by="name"
sort-desc
must-sort
>
<template v-slot:test> TEST </template>
<template v-slot:item-actions="{ item }">
<slot name="item-actions" :item="item"></slot>
</template>
</DatatableGeneric>
In this code you can see that I have 2 named slots, "test" and "item-actions".
Child component:
slots? you here? {{ slots}}
slots? still not here? {{ testSlots }}
<slot name="test"> aaaaa </slot>
<tbody>
<tr v-for="item in computePaginatedData" :key="item.name">
<td
v-if="showSelect"
class="d-flex justify-center items-center align-center"
style="width: 100%"
>
<v-checkbox
:value="item"
color="primary"
v-model="computeSelected"
hide-details
class="align-center justify-center"
/>
</td>
<td v-for="header in headers" :key="header.value">
<slot :name="`item-${header.value}`" :item="item">
{{ get(item, header.value) }}
</slot>
</td>
</tr>
</tbody>
....
<script setup lang="ts">
import { ref, computed, reactive, onMounted, watch } from 'vue'
import { useSlots } from 'vue'
const slots = useSlots()
const testSlots = computed(() => {
return slots
})
.....
In the projet I see: slots? you here? {} slots? still not here? {}
Something is wrong here in the projet but pretty sure it's not related to my code as the slots are working fine. They just aren't listed in the slots variable.
Also tried with "$slots" in the template