How to display data from Firebase Database to Vuetify Datatable with VueJs - firebase-realtime-database

Question

I have a problem on my code. I can't display my data to Vuetify Datatable, Although
it is enable Read and write on my Firebase Database:
Anyway here is my code for that, any wrong with my code? Comments were greatly appreciated:
<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

You need the data () function to return the object that is holding your data.
export default {
data () {
return {
// data for component here
}
}
}
By iterating over the template you would be creating multiple data tables. The data table component itself handles iterating over the items.
The array of objects you pass in to the :items will be available through the scope="props", the string assigned to scope can be named something besides props if you prefer. Your data will be in the props.item object. Also make sure your header array is defined somewhere.
<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'}
]
}
}
}