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

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

I don't know a whole lot about firebase, but based on what I see, I would guess that none of your variables are defined. I think you need to define headers & items . Also, I don't know what the scope="props" bit is doing. That doesn't mean it's wrong, I just don't know what it's doing. — Chase Roberts
– Chase Roberts, Commented Sep 25, 2017 at 18:31
I'm assuming you have already been through this example : vuejs.org/v2/examples/firebase.html — Chase Roberts
– Chase Roberts, Commented Sep 25, 2017 at 18:32

jordanw · Accepted Answer · 2017-09-27 19:15:12Z

2

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

edited Sep 27, 2017 at 19:15

answered Sep 27, 2017 at 19:09

jordanw

1,51510 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arj Over a year ago

+1 This had me puzzled for a while. The website doesn't seem to document the fact that the data in :items is visible through scope="props", and that individual items are visible through props.item. It sort of just leaves you to figure it out through the examples.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related