[Vuejs]-Vuetify access v-slot:item in datatable custom component

3👍

What you want to achieve is I believe a wrapper component. You want to wrap a component on top of another one to let him have some custom properties that you want to reuse in your application.

What you need is a small snippet that will allow your slots to be used:

<!-- pass through scoped slots -->
<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
  <slot :name="scopedSlotName" v-bind="slotData" />
</template>

<!-- pass through normal slots -->
<template v-for="(_, slotName) in $slots" v-slot:[slotName]>
  <slot :name="slotName" />
</template>

You can find the source of this here

Basically, here how you can rewrite your CustomTable.vue:

<template>
  <div>
    <v-data-table
      v-bind="$attrs"
      v-on="$listeners"
      :search="search"
      loading-text="Loading... Please wait"
      dense
    >
      <!-- pass through scoped slots -->
      <template
        v-for="(_, scopedSlotName) in $scopedSlots"
        v-slot:[scopedSlotName]="slotData"
      >
        <slot :name="scopedSlotName" v-bind="slotData" />
      </template>

      <!-- pass through normal slots -->
      <template v-for="(_, slotName) in $slots" v-slot:[slotName]>
        <slot :name="slotName" />
      </template>
      <template v-slot:top>
        <v-toolbar dark flat dense>
          <v-toolbar-title>{{ title }}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
          ></v-text-field>
          <v-spacer></v-spacer>
        </v-toolbar>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  name: "CustomTable",
  props: ["title"],
  data: function () {
    return {
      search: "",
    };
  },
  methods: {},
};
</script>

I made a codesandbox to show you how it works:
https://codesandbox.io/s/vuetify-2-forked-3lp9y?file=/src/components/CustomTable.vue

I also added automatic attribute and listeners bindings on your table, to allow you to use all the features that Vuetify provides.

Leave a comment