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

【问题标题】：Array of Objects Data wont bind to Vuetify Data Table?对象数据数组不会绑定到 Vuetify 数据表？
【发布时间】：2021-04-25 23:59:09
【问题描述】：

我有一个 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>

【问题讨论】：

标签： vue.js datatables vuetify.js

【解决方案1】：

标题集合的value 属性必须与项目的键对应。因此，在您的情况下，它应该如下所示：

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

【讨论】：

既然这回答了你的问题，请点赞并接受这个答案。