vue.js - Array of Objects Data wont bind to Vuetify Data Table?

Question

I have a Vuetify data table which takes the headers as an array of objects returned in the component and the data (:items) is bound to an array also returned in the component. This array is populated with Firestore data which is there, because I can console.log it.

The issue is that the data table is empty, and contains no data in the body at all.

Could this be caused because my items array contains more data points then I have headers in my table?

Vuetify Component

<template>
<v-card>
    <v-card-title>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="items"
      :search="search"
    ></v-data-table>
  </v-card>
</template>

Component Script

<script>
/* eslint-disable */
import firestore from '/firebase.js';

export default {
  data() {
    return {
      search: '',
      items: [],
      headers: [
         {
            text: 'ID',
            align: 'start',
            sortable: true,
            value: 'name',
          },
          { text: 'Date Created', value: 'Date Created' },
          { text: 'Date Finished', value: 'Date Finished' }
      ],
      show: false,
    };
  },
  name: "Home",
  methods: {
    getData() {
      firestore.collection("itemStore")
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            var itemData = doc.data();
            this.items.push({
              id: itemData.incId,
              dateCreated: itemData.dateCreated,
              dateFinished: itemData.dateFinished,
              email: itemData.email
            });
            console.log(this.items);
          });
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

question from:https://stackoverflow.com/questions/65829557/array-of-objects-data-wont-bind-to-vuetify-data-table

Answer 1

The value attribute of your headers collection has to correspond with the keys of your items. So in your case it should look like this:

headers: [
  {
    text: 'ID',
    align: 'start',
    sortable: true,
    value: 'id',
  },
  { 
    text: 'Date Created', 
    value: 'dateCreated' 
  },
  { 
    text: 'Date Finished', 
    value: 'dateFinished' 
  }
]