Vuetify Firebase 数据未显示在数据表中

Question

I have a problem on my code. I can't display my data to Vuetify Datatable, Although it is enable Read and write on my Firebase Database and the data is loaded into the array object:

Anyway here is my code for that, any wrong with my code? Comments are greatly appreciated:

<template>
    <div>
      <v-data-table
        :headers= "headers"
        :items= "userdata"
        class="elevation-1"
        hide-default-header
        hide-default-footer
      >
      </v-data-table>
    </div>
  </template>

<script>

import firebase from '@/configFirebase.js'

export default { 
  data: ()=> ({
    headers: [
        {
          text: 'Active Users',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Email', sortable: false, value: 'email' },
        { text: 'Is Admin', sortable: false, value: 'isAdmin'},
      ],
    }),

    methods: {
        aUserData() {
            firebase.db
            .collection('cUsers').get().then((querySnapShot) => {
                this.userdata = []
                querySnapShot.forEach((doc) => {
                    this.userdata.push({
                        name: doc.data().name,
                        email: doc.data().email,
                        isAdmin: doc.data().isAdmin               
                    })
                })
            })      
        },

        getitemcontrols() {
            return `item.isAdmin`;
        },
    },

    mounted() {
        
    },

    created(){
        this.aUserData(); 
    },

    computed: {
        user() {
            return this.$store.getters.user
        },
    }
}
</script>

Answer 1

You need to declare userdata in data block, added notes explaining what changed:

<template>
    <div>
      <v-data-table
        :headers= "headers"
        :items= "userdata"
        class="elevation-1"
        hide-default-header
        hide-default-footer
      >
      </v-data-table>
    </div>
  </template>

<script>

import firebase from '@/configFirebase.js'

export default { 
  data: ()=> ({
    headers: [
        {
          text: 'Active Users',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Email', sortable: false, value: 'email' },
        { text: 'Is Admin', sortable: false, value: 'isAdmin'},
      ],
   userdata: [], // Here you datatable will be able to access it.
    }),

    methods: {
        aUserData() {
            firebase.db
            .collection('cUsers').get().then((querySnapShot) => {
                // this.userdata = [] // This does not get exposed to template
                querySnapShot.forEach((doc) => {
                    this.userdata.push({
                        name: doc.data().name,
                        email: doc.data().email,
                        isAdmin: doc.data().isAdmin               
                    })
                })
            })      
        },

        getitemcontrols() {
            return `item.isAdmin`;
        },
    },

    mounted() {
        
    },

    created(){
        this.aUserData(); 
    },

    computed: {
        user() {
            return this.$store.getters.user
        },
    }
}
</script>

Also, if I may suggest, stick to consistent camelCase variable/methods names, makes reading code much easier, and once you get used to using camelCase, makes it easier to spot mistakes.