Vuetify Firebase 數據未顯示在數據表中

Question

我的代碼有問題。 我無法將我的數據顯示到 Vuetify 數據表，盡管它在我的 Firebase 數據庫上啟用了讀寫功能，並且數據已加載到數組 object 中：

無論如何，這是我的代碼，我的代碼有什么問題嗎？ 非常感謝評論：

<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

您需要在data塊中userdata用戶數據，添加解釋更改內容的注釋：

<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>

另外，如果我可以建議的話，堅持使用一致的camelCase命名法變量/方法名稱，使閱讀代碼更容易，並且一旦您習慣使用駝峰命名法，就更容易發現錯誤。