如何使用VueJs將數據從Firebase數據庫顯示到Vuetify數據表

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