数据未显示在 Firebase 上，使用 V-data-table Vue.js

Question

数据未显示，我不知道如何将值从 firebase 推送到 v-data-table 值。这是我的代码。

<template>
  <div class="dashboard">
    <h2 class="subheading mx-5">Subject</h2>
    <v-btn block color="primary mt-5" @click="enrollSubjects()">Enroll Subjects</v-btn>
    <v-container class="my-5">
      <template>
        <v-card>
          <v-card-title>
            Courses
            <v-spacer></v-spacer>
            <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
          </v-card-title>
          <v-data-table v-model="selected" :headers="headers" :items="courses" show-select :single-select="singleSelect" item-key="descrip_title" :search="search">

          </v-data-table>
        </v-card>
      </template>
    </v-container>
  </div>
</template>

<script>
// @ is an alias to /src
import db from '@/firebase/init'
export default {
  name: 'dashboard',
  data(){
    return{
      search: '',
      singleSelect: false,
      subjects: [],
      selected: [],
      headers: [
        {text: 'Control No.', value: 'controlno'},
        {text: 'Course No.', value: 'courseno'},
        {text: 'Descriptive Title', value: 'descrip_title'},
        {text: 'Schedule(In)', value: 'schedin'},
        {text: 'Schedule(Out)', value: 'schedout'},
        {text: 'Room No.', value: 'roomno'},
        {text: 'Days', value: 'days'},
        {text: 'Units', value: 'units'}
      ],
      courses: []
    }
  },
  methods:{
    enrollSubjects(){
      if(this.selected === this.selected){
        this.$swal({
          title: 'No Course Selected', 
          text: 'Please select course/s',
          type: 'error'
        })
      }
    },
    created(){
      db.collection('masterlist_courses').get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          let course = doc.data()
          course.id = doc.id
          this.courses.push(course)
        })
      })
    }
  }
}
</script>

我在firebase和vuetify中练习，我不知道如何将这个推送到v-data-table的值。我很难过，它没有向数据表显示任何内容，也没有错误。在我对firebase中的数据进行编码后没有显示任何内容

Answer 1

您需要使用 vue.js life cycle hook 之一在组件挂载之前触发 fetch。

例如created钩子可用于“创建实例后运行代码”，如下：

<script>
// @ is an alias to /src
import db from '@/firebase/init'
export default {
  name: 'dashboard',
  data(){
    return{
      search: '',
      singleSelect: false,
      subjects: [],
      selected: [],
      headers: [
        {text: 'Control No.', value: 'controlno'},
        {text: 'Course No.', value: 'courseno'},
        {text: 'Descriptive Title', value: 'descrip_title'},
        {text: 'Schedule(In)', value: 'schedin'},
        {text: 'Schedule(Out)', value: 'schedout'},
        {text: 'Room No.', value: 'roomno'},
        {text: 'Days', value: 'days'},
        {text: 'Units', value: 'units'}
      ],
      courses: []
    }
  },
  methods:{
    enrollSubjects(){
      if(this.selected === this.selected){
        this.$swal({
          title: 'No Course Selected', 
          text: 'Please select course/s',
          type: 'error'
        })
      }
    }
  },
  created: function() {
      db.collection('masterlist_courses').get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          let course = doc.data()
          course.id = doc.id
          this.courses.push(course)
        })
      })
  }
}
</script>

---

请注意，如果对 Firestore 的查询需要一些时间，您可以显示 spinner 并在查询完成时将其隐藏，即在传递给 then() 的回调中，在 snapshot.forEach() 之后。

Answer 2

您需要定义应显示的项目。到目前为止，您只定义了标题。对您拥有的每个标题都尝试这样。

                    <template v-slot:item.controlno="{ item }">
                        {{ item.controlno }}
                    </template>

希望这会有所帮助 =)