CODEWITHSUNDEEP
firebase-realtime-databasevue.jsvuetify.js
RhamNold Zurbito
RhamNold Zurbito

Reputation: 71

How to display data from Firebase Database to Vuetify Datatable with VueJs

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

Upvotes: 0

Views: 4063

Answers (1)

jordanw
jordanw

Reputation: 1505

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

Upvotes: 2

Related Questions