Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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' 
  }
]

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...