Data not showing on Firebase, Using V-data-table Vue.js - firebase

Question

The data is not showing, I do not know how to push the value from the firebase to the v-data-table values. Here is my code.
<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>
I am practicing in firebase and vuetify, I do not know how to push this to the value of the v-data-table. I am having hard time and its not showing anything to the datatable and also there is no error. It's not saying anything after I code the data in the firebase not displaying

Answer 1

You need to use one of the vue.js life cycle hook to trigger the fetch before the component is mounted.
For example the created hook can be used to "run code after an instance is created", as follows:
<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>
Note that if the query to Firestore is going to take some time, you could display a spinner and hide it when the query is done, i.e. in the callback passed to then(), after snapshot.forEach().

Answer 2

You need to define what items should be shown. You have only defined your headers so far. Try it like this for every header you have.
<template v-slot:item.controlno="{ item }">
{{ item.controlno }}
</template>
Hope this helps =)