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

Question

我的代码有问题。我无法将我的数据显示到 Vuetify Datatable，虽然 它在我的 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 () 函数来返回保存数据的对象。

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

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

您传递给:items 的对象数组将通过scope="props" 获得，分配给scope 的字符串可以根据需要命名为props 之外的其他名称。您的数据将位于 props.item 对象中。还要确保您的标头数组在某处定义。

<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'}
        ]
      }
   }
}