With vuejs, how do I get firebase (vuefire) object into component data

Question

Using firebase 4.10.1 and vuefire 1.4.5.

I have confirmed that I have initialized firebase, exported a db const, and imported vuefire correctly.

I am trying to load my firebase object (JSON) onto my dataTable component data.

I am trying this:

export default {
    firebase: function () {
       return {
           fbObj: db.ref('collection')
       }
    },
    data () {
        return {
            dataTable: fbObj
        }
    }
 }

It's wired up correctly because if I use {{ fbObj }} in my template I get the JSON object displayed in full. However, if I try to load it onto the dataTable I get "fbObj is not defined" as console error.

How can I load my firebase object onto the dataTable?

acdcjunior · Accepted Answer · 2018-03-15 02:46:46Z

1

The code:

firebase: function () {
   return {
       fbObj: db.ref('collection')
   }
},

Creates a this.fbObj available to your Vue instance. So instead of dataTable: fbObj the correct would be more like:

data () {
    return {
        dataTable: this.fbObj   // but even this won't work
    }
}

But that won't work. You can't do it because that data() initialization code will be executed before the fbObj has been initialized (it takes a bit of time to update it from firebase).

So if you want dataTable to refer to that collection, either:

Rename the firebase object to dataTable:

firebase: function () {
   return {
       dataTable: db.ref('collection')
   }
},

Or create a computed property:

firebase: function () {
   return {
       fbObj: db.ref('collection')
   }
},
computed: {
    dataTable() {
        return this.fbObj;
    }
}

Then you can use this.dataTable in the Vue instance JavaScript or dataTable in the template.

answered Mar 15, 2018 at 2:46

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

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

1 Comment

Shane Richardson Over a year ago

Much thanks! I just renamed the firebase object and it worked as I wanted.

Collectives™ on Stack Overflow

With vuejs, how do I get firebase (vuefire) object into component data

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