web-dev-qa-db-fra.com

Le tableau de données Vuetify n'affiche pas les données

Le tableau de données Vuetify ne montrant pas de données, il montre qu'il y a 1 ligne sur 1 affichée, mais le corps du tableau est vide. Mon code composant:

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

Résultat:

enter image description here

Une idée de comment résoudre ce problème?

javascriptcssvue.jsvuejs2vuetify.js
6
user2626972

Dans mon cas, le problème était que j'avais mis headers tableau dans la section props au lieu de data. Donc, même lorsque v-datatable avait sa propriété items définie sur un tableau d'objets (ce qui peut être confirmé en utilisant Vue Dev Tools; a Chrome), il n'afficherait aucune ligne.

J'ai passé une demi-heure à me cogner la tête, pour finalement réaliser ce problème. Dès que j'ai déplacé headers de props vers data, le tableau a commencé à afficher les lignes. J'espère que cela aide quelqu'un sur la route.

1
dotNET