对象数组不会绑定到 Vuetify 数据表？

如何解决对象数组不会绑定到 Vuetify 数据表？

我有一个 Vuetify 数据表，它将标题作为组件中返回的对象数组，数据 (:items) 绑定到组件中也返回的数组。这个数组填充了那里的 Firestore 数据，因为我可以对它进行 console.log。

问题是数据表是空的，正文中根本没有数据。

这可能是因为我的 items 数组包含的数据点多于表中的标题吗？

Vuetify 组件

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

组件脚本

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

解决方法

标题集合的 value 属性必须与项目的键相对应。所以在你的情况下它应该是这样的：

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