CODEWITHSUNDEEP
vue.jsvuejs2vuetify.jsvuetify-datatable
PyKKe
PyKKe

Reputation: 373

Why Vuetify v-data-table scoped item slots don't work as expected?

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

<!-- DataTable.vue -->
<template>
  <v-card outlined>
    <v-data-table
      v-bind="$attrs"
      v-on="$listeners"
      dense
    >
      <template
        v-for="(_, name) in $scopedSlots"
        #[name]="slotData"
      >
        <slot
          :name="name"
          v-bind="slotData"
        ></slot>
      </template>
    <v-data-table>
  <v-card>
</template>

I was wondering, why if I add this

<!-- Relevant code snippet -->
<slot
  :name="name"
  v-bind="slotData"
>
  DEFAULT RENDER
</slot>

and use my custom component

<!-- UsersDataTable.vue -->
<template>
  <DataTable
    :headers="headers"
    :items="users"
  ></DataTable>
</template>

result looks like this

enter image description here

and not like this?

enter image description here

Edit #1

Better discussed here.

Upvotes: -1

Views: 1133

Answers (2)

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

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>

Upvotes: 0

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37793

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...

Upvotes: 1

Related Questions