CODEWITHSUNDEEP
vue.jsvuetify.js
Connie DeCinko
Connie DeCinko

Reputation: 902

no-data and no-results no longer work when using a body slot in Vuetify data-table

I am using code from the examples on the Vuetify website however my no-data and no-results slots content never appears.

I am overriding the standard tbody like so...

<template v-slot:body="{ items }">
    <transition-group tag="tbody" name="invoice" v-for="(item, index) in items" :key="index">
        . . .
    </transition-group>
</template>

And my no data/results slots look like this.

<template v-slot:no-data>
  <h3 class="ma-6 subtitle-1 text-center">NO DATA HERE!</h3>
</template>

<template v-slot:no-results>
  <h3 class="ma-6 subtitle-1 text-center">NO RESULTS HERE!</h3>
</template>

The progress slot works just fine.

<template v-slot:progress>
  <v-progress-linear color="yellow" :height="10" indeterminate></v-progress-linear>
  <br />
  <h3 class="ma-6 subtitle-1 text-center">Loading invoices... please wait...</h3>
</template>

I followed the Vuetify docs to the letter and yet the no-data and no-results templates never display. How do I get them to work?

Upvotes: 2

Views: 3931

Answers (3)

Faiza Malik
Faiza Malik

Reputation: 1

Try this; it works:

<template slot="no-results">
    // your code here
</template>   
<template v-slot:no-data>
    // your code here
</template>

Upvotes: 0

Matt McCabe
Matt McCabe

Reputation: 3446

I found v-slot:[``no-data``] instead of v-slot:no-data works. Presumably it's not parsing it in the same way.

Upvotes: 0

LastM4N
LastM4N

Reputation: 2230

      <v-data-table :headers="headers" :items="desserts" :search="search" item-key="name" style="height: 700px">
        <template v-slot:body="{items, headers}">
          <tbody name="list" is="transition-group" v-if="items.length > 0">
            <tr v-for="item in items" :key="item.name" class="item-row">
              <td>{{item.name}}</td>
              <td>{{item.calories}}</td>
              <td>{{item.fat}}</td>
              <td>{{item.carbs}}</td>
              <td>{{item.protein}}</td>
              <td>{{item.iron}}</td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td :colspan="headers.length" style="text-align: center">No Results Here!</td>
            </tr>
          </tbody>
        </template>
      </v-data-table>

I had same problem and i resolved that adding on tbody element a condition for checking the items.length. If there are no results then goes to v-else.

You will need to change a bit the data-table structure.

https://codepen.io/Jayesh_v/pen/WNQmaPJ

Upvotes: 2

Related Questions