如何使用 VueJs 将 Firebase 数据库中的数据显示到 Vuetify 数据表

Question

我的代码有问题。我无法将我的数据显示到 Vuetify 数据表，虽然它在我的 Firebase 数据库上启用读写：无论如何，这是我的代码，我的代码有什么问题吗？非常感谢评论：

<template v-for="user in users">
   <v-data-table
       v-bind:headers="headers"
       :items="user"
       hide-actions
       class="elevation-1"
        >
       <template slot="items" scope="props">
         <td>{{ users.title }}</td>
         <td class="text-xs-right">{{users.description }}</td>
       </template>
   </v-data-table>
</template>

import * as firebase from 'firebase'

let config = {
 //config here.....
}
let app = firebase.initializeApp(config);
let db = app.database();
let userRef = db.ref('users');
export default{
    firebase:{
        users:userRef
    }
}

Answer 1

您需要 data () 函数来 return 保存数据的 object。

 export default {
   data () {
      return {
      // data for component here
      }
   }
 }

通过遍历模板，您将创建多个数据 table。数据 table 组件本身处理对项目的迭代。

你传入 :items 的 object 数组将通过 scope="props" 可用，分配给 scope 的字符串可以命名为 props 之外的其他名称如果你更喜欢。您的数据将在 props.item object 中。还要确保你的 header 数组在某处定义。

<template>
  <v-data-table
       v-bind:headers="headers"
       :items="exampleData" // pass the array of objects you want in the table here. 
       hide-actions
       class="elevation-1"
       >
       <template slot="items" scope="props">
         <td>{{ props.item.user}}</td>
         <td class="text-xs-right">{{props.item.title}}</td>
       </template>
   </v-data-table>
</template>

import * as firebase from 'firebase'

let config = {
 //config here.....
}
let app = firebase.initializeApp(config);
let db = app.database();
let userRef = db.ref('users');
export default{
    data () {
      return {
        firebase:{
            users:userRef
        },
        exampleData: [
            {'user': 'Neo', 'title': 'CEO'},
            {'user': 'Trinity', 'title': 'CTO'}
        ],
        headers: [
            {text: 'User', value: 'user', align: 'left'},
            {text: 'Title', value: 'title', align: 'left'}
        ]
      }
   }
}

如何使用 VueJs 将 Firebase 数据库中的数据显示到 Vuetify 数据表

How to display data from Firebase Database to Vuetify Datatable with VueJs

vue.js

firebase-realtime-database

vuetify.js