Vuetify data table is not showing data

Question

Vuetify data table is not showing data, it shows that there are 1 row out of 1 displayed, but the table body is empty. My component code:

<template> <v-data-table :headers="headers" :items="desserts" > </v-data-table> </template> <script> export default { name: 'Users', data () { return { headers: [ { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' }, { text: 'Fat (g)', value: 'fat' }, ], desserts: [ { name: 'Frozen Yogurt', fat: 6.0, }, ] } } } </script> <style scoped lang="stylus"> </style>

Result:

Any idea how to fix this?

Boussadjra Brahim · Accepted Answer · 2020-04-14 13:18:52Z

Since you're using Vuetify 1.x You should add a template with scoped slot :

 <v-data-table :headers="headers" :items="desserts" > <template v-slot:items="props"> <td class="text-xs-right">{{ props.item.name }}</td> <td class="text-xs-right">{{ props.item.fat }}</td> </template> </v-data-table>

or you should upgrade to the version 2.0 which does simply :

<template> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" ></v-data-table> </template>

if you want to customize your data cells check this answer

Yeah, was looking at the documentation for version 2.0.0, you don't have to add template there. But I have 1.5.16 installed...
Hey, I tried your solution but it didn't work.. My Vue version is 2.5.16 Do you have any idea how can I fix it?
Please check this answer ,i this doesn't work post a detailed question and give the link

dotNET · Accepted Answer · 2020-01-18 17:02:59Z

In my case the problem was that I had put headers array in the props section instead of data. So even when v-datatable had its items property set to an array of objects (which can be confirmed using Vue Dev Tools; a Chrome extension), it would not show any rows.

I spent half an hour banging my head, only to finally realize this problem. As soon as I moved headers from props to data, the table started showing rows. Hope this helps someone down the road.

Collectives™ on Stack Overflow

Vuetify data table is not showing data

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related