0

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

Jer
  • 183
  • 3
  • 13

1 Answers1

0

Well, it worked if I just loop on $slots with:

<template v-for "keyName in Object.keys($slots)" :key="kayName">

But on vue 2, I remember that when I print $slots I can see every slots inside. Here in vue 3, I don't see anything.

Jer
  • 183
  • 3
  • 13