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

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

1 个答案: