scoped item slots default content doesn't work as expected

Question

I've created a CustomDataTable component based on <v-data-table>:

CustomDataTable.vue

<template>
  <div>
    <v-container fluid>
      <v-data-table
        ...
      >
        <!-- custom implementations -->
      <v-data-table>
    <v-container>

    <!-- custom implementations -->

  <div>
</template>

I had to add followings lines of code in order to use scoped item slots from child component (stackoverflow link):

<v-data-table
  ...
>
  <!-- custom implementations -->
  
  <template
    v-for="(_, name) in $scopedSlots"
    #[name]="slotData"
  >
    <slot
      :name="name"
      v-bind="slotData"
    ></slot>
  </template>
</v-data-table>

Now why if I add this:

<template
  v-for="(_, name) in $scopedSlots"
  #[name]="slotData"
>
  <slot
    :name="name"
    v-bind="slotData"
  >
    DEFAULT RENDER
  </slot>
</template>

And use following child component (UsersDataTable.vue):

<template>
  <CustomDataTable
    :headers="headers"
    :items="users"
    ...
  >
    <!-- NO CODE HERE -->
  </CustomDataTable>
</template>

Result looks like this:

And not like this?

Michal Levý · Answer 1 · 2022-06-10T12:25:09.003

0

Default slot content is used only if parent component does not provide the content for that slot. But since your slot is defined for each slot content provided by the parent the content always exists and default is never used

Edit (after question edit): On the other side, if you do not pass any slot content into your CustomDataTable (last code example), $scopedSlots is empty, v-for is not executed, no slot content is passed into v-data-table and it uses default rendering...

edited Jun 10 '22 at 12:25

answered Jun 10 '22 at 11:43

Michal Levý

33,064
4
68
86

I edited my question, maybe it wasn't clear. I still don't understand why it doesn't show 'DEFAULT RENDER' even though I'm NOT using any item slot inside child component. – PyKKe Jun 10 '22 at 12:16
Thank you for your reply, but I think I messed up. I splitted my big question into small ones hoping I would understand better, but so it wasn't. Now I'm going to write a bigger and more detailed question. – PyKKe Jun 10 '22 at 19:13

score 0 · Answer 2 · answered Jun 10 '22 at 17:57

you have to remove slot from this code. Becuase when you define the slot, you're ignoring The content inside it.

<template
  v-for="(_, name) in $scopedSlots"
  #[name]="slotData"
>
  <slot
    :name="name"
    v-bind="slotData"
  >
    DEFAULT RENDER
  </slot>
</template>

Also, there is another slot you have to define. Let me introduce the final code inside your CDatatable Component:

        <template
          v-for="slot in Object.keys($scopedSlots)"
          :slot="slot"
        >
          DEFAULT RENDER
        </template>

        <template v-for="(_, name) in $slots" #[name]>
          DEFAULT RENDER
        </template>

Thank you for your reply, but I think I messed up. I splitted my big question into small ones hoping I would understand better, but so it wasn't. Now I'm going to write a bigger and more detailed question. — PyKKe, Jun 10 '22 at 19:14

scoped item slots default content doesn't work as expected

2 Answers2