VueJsを使用してFirebaseデータベースからVuetify Datatableへデータを表示する方法

Question

私のコードに問題があります。 私の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'} 
     ] 
     } 
    } 
}