vuejs/vuefire

🔥 Firebase bindings for Vue.js

Firebase for Vue made easy!

• Works with Vue >=2.7 and Vue 3
• Supports Composition and Options API
• Supports Vuex, Pinia, and anything that gives you a Vue ref()
• Built for Modular Firebase >=9 for optimal tree shaking
• Automatically listen for changes in nested references

📚 Documentation

Help me keep working on this project 💚

• Become a Sponsor on GitHub
• One-time donation via PayPal

Silver Sponsors

Bronze Sponsors

---

Status

• VueFire and Nuxt VueFire are both currently stable

Roadmap

You can follow the progress and future plans on the Roadmap issue.

Installation

VueFire requires the firebase package to be installed as well as vuefire:

npm install vuefire firebase

Check the documentation for Nuxt instructions.

Usage

• Getting Started
• Vite Demo
• Nuxt demo - Spark Plan
• Nuxt demo - Blaze Plan

Related

• Firebase Web Docs
  • Realtime database
  • Cloud Firestore

License

MIT

vuefire's Issues

Update todo in example

More of a request than issue.

Would be nice to show in the example how to "update" an item/todo. Adding and Deleting are fine for a simple list, but editing/updating and saving would be critical in a real world app.

Accessing .key values

What is the syntax to get a data value's .key value? Neither {{ obj.key }} nor {{ obj.'.key' }} work for me.

Model doesn't update firebase data

My Firebase reference is pulling in changes, but when I update a property of the object using a v-model reference, it doesn't trigger the update in Firebase.

I'm using Vue 2.0.0-rc3 and vuefire 1.2.

Thanks

    var firebaseApp = firebase.initializeApp(config);

    var db = firebaseApp.database();

    Vue.use(VueFire);

    var app = new Vue({
      el: '#app',
      firebase: {
        test: {
          source: db.ref('test'),
          asObject: true
        }
      }
});

    <input type="text" v-model="test.key">

[Issue] firebase object

Hi I really like this package and I'm looking forward to use it in the my future projects .

When I try to get user messages, the firebase object does not recognize userID data and refer it to undefined.

created(){
    this.auth.state({
        forward: '/app',
        redirect: '/login'
     }, (user) => {
         this.userID = user.uid // return firebase user id
         console.log(this.userID)
     });	
},
firebase:{
    messages: store.state.messages('messages/' + this.userID // undefined)
} ,
data()
{
    return {
        userID: '',
        auth: new Auth()
   }
}

Dynamic Ref

I want to figure out the best time to bind the data. Say you are passing a id from a route, If I try to access this info in the beforeCreate method data is null. When is it best to bind this data?

ie:

var id = this.$route.params.id;
var ref = firebase.database().ref('/profiles/'+id);
this.$bindAsArray('profiles', ref) 

Issue accessing nested data

Hi,
Apologies if this isn't the right place for this, but given the following data structure

[
  {
    "name": "Ada Lovelace",
    "title": "Ms.",
    ".key": "alovelace",
    "contacts": {
      "mobile": "0851234567",
      "tel": "05212345"
    } 
  }
]

Given that we have a db reference to a list of users, I cannot access {{ user.contacts.mobile }} for example as I get an undefined error in the browser console. However, {{ user.contacts }} displays the JSON no problem - {"mobile": "0851234567","tel": "05212345"} - any suggestions? Thanks in advance.

Dynamic firebase configuration

I have a problem with initialising the firebase.

1. First when user provides credentials I make a rest api call to get the firebase configuration since our app has different clients with different firebase instances.
2. Now that I can't use variable db ( firebase.database() ) in components since I haven't initialised firebase because the user is not logged in yet. This throws an error saying firebase app is not initialised.

AsObject not binding as actual object

When I bind as an object, I will still have to iterate through the object to access my values.

Uncaught TypeError: _firebase2.default is not a constructor

Hello,
I am trying to run the following simple line of code in my main.js file:
var Users = new Firebase('https://vue-demo.firebaseIO.com/users');
and I get this weird error:
Uncaught TypeError: _firebase2.default is not a constructor

Any idea? it's driving me crazy! :(

FYI, I am using Vue js, vue fire and firebase all installed through npm.
Thanks!

Add a callback when data is ready

This would allow SSR
Helpful SO question: http://stackoverflow.com/questions/27978078/how-to-separate-initial-data-load-from-incremental-children-with-firebase/27995609#27995609
#68

Question: config files best practice.

Lets say I'm using vue-cli to init my vue project. Where in that folder structure is the best place to define my config variables(firebase vars) so I don't have to include them in git repo.
Just need some advice on that.

Vue 2.0

Hi, quick question - just wondering if Vuefire works fine with the Vue 2.0 release candidates?

Thanks in advance.

Can't access $route params in .vue component

Currently I'm having difficulty accessing any $route params from vue-router in order to utilize the params for vuefire queries. It seems like the vuefire property is tied to to a different context rather than the VueComponent context that other component hooks utilize.

Here is some code to explain:

My view component that needs access to the $route.params. This is what I'd hoped to use:

<template>
  <h1>{{job.title}}</h1>
</template>

<script>
  import db from '../services/firebase-service.js';

  export default {
    data() {
      return {

      }
    },
    firebase: {
      job: {
        source: db.ref('jobs/' + this.$route.params.id),
        asObject: true
      }
    }
  }
</script>

<style></style>

While currently I am doing this as a workaround, utilizing the global location object:

<template>
  <h1>{{job.title}}</h1>
</template>

<script>
  import db from '../services/firebase-service.js';

  export default {
    data() {
      return {

      }
    },
    firebase: {
      job: {
        source: db.ref('jobs/' + location.pathname.substring(5, location.pathname.length)),
        asObject: true
      }
    }
  }
</script>

<style></style>

Since the "firebase" property is applied on the component level I assumed it would also be referencing the VueComponent context but instead it references a different context like this:

"{
  "default":{
    "firebase":{
      "job":{"asObject":true}},
      "__file":"/Users/seanrobertson/Projects/vue-spa/src/pages/JobShow.vue",
      "staticRenderFns":[],
      "beforeCreate":[null],
      "beforeDestroy":[null]
    }
}"

Is there a way to reference the current component context from within the firebase property? I have looked at #10 but I'm not sure it's applicable as I am using npm and webpack. Any help would be appreciated as I'm not too keen on the location hackery.

Cannot run equalTo query with input binding.

Here's what I'm trying to do:

<template>
  <div>
    <input type="text" v-model="inputText">
    <p>{{ queryResult }}</p>
  </div>
</template>

<script>
import db from './firebasedb.js';
export default {
  name: 'test',
  data() {
    return {
      inputText: '',
    }
  },
  firebase() {
    return {
      queryResult: {
        source: db.ref('customers').orderByChild('firstName').equalTo(this.inputText),
        asObject: true,
      },
    };
  },
}
</script>

And the above code results in following error:
Query.equalTo failed: First argument contains undefined in property 'customers'
If I replace equalTo(this.inputText) with equalTo('John') then queryResult object contains correct data. How can I do this kind of querying?

Forgot to build the new version?

I noticed the version on dist is still 1.0.1, that led to some errors when using npm install vuefire with firebase 3.x.x, is you still work on it or just forgot to build the new version😝😝?

Reconnecting to firebase after signin.

I am having signin and diplay of data in the same file.

Obviously the user cannot retrieve data when they are not signed in.
After a user is authenticated, how do I tell vue to refresh the firebase refs when the authentication state is changed without refreshing the page?

Upgrade to the latest Firebase 3.x.x SDK

I am quite happy with what vuefire offers so far, would love to see the support for firebase 3.0 coming.

Does vuefire work with Webpack Hot Module Replacement?

I'm trying to get vuefire to work with Quasar framework but I think Webpack Hot Module Replacement is wiping out firebase data fetched with vuefire.
A production build will probably work ok , but it's during development that firebase data seems to disappear after H.M.Replacement.

More info in this post
quasarframework/quasar#87

vm data not initialised in firebase function

As pointed out in #63
When using the function syntax:

data: {
  user: 'posva'
},
firebase () {
  return {
    someRef: db.ref('users/' + this.user) // this.user === undefined
  }
}

user should not be undefined

Question: Firebase 3 authentication model

I'm currently using Vue 2 and Firebase separately, and struggling to get the app to manage authentication nicely - for example, the Vue created() method fires before the Firebase auth() object is created, which makes the Vue app think the user isn't logged in even if they are.

Do you have any plans to integrate authentication in vuefire to simplify this? It seemed from the examples that vuefire expects authentication to happen elsewhere, but that's exactly what I'm struggling with... I will keep at it, but I thought if you were heading in that direction anyway, it might help :)

cancelCallback in object

I'm eager to know what do the cancelCallback should do when defining a data as an object

Remote DB does not get updated on edit

The remote changes are mirrored locally, but not the other way around.

Managing component dependencies

Hi, I'm just wondering what's the recommend method for importing Firebase, calling .initializeApp and firebaseApp.database() etc.? Do you generally use these at the top root App component level and pass them down as props to all nested child components or is it just easier to call all of these within each component?
If so, could you please provide an example which could be added to the documentation?

Thanks in advance.

null problem when binding dynamically

how can i fix this ?

when i use this.$bindAsArray or As an object

i receive null results but after 2 seconds or something its populated but not dynamically

is this a bug or something

or can i make a then response for that?

like db.ref('users').on ??

vuefire declaritive two way binding

This is excellent code.

I plan on using this in the future and I am hoping to not have to simplify the use.

Before I start, I wanted to make sure that it really isn't there or that I am not understanding a technical limitation or philosophy of Vue. In the todo example https://jsfiddle.net/posva/wtyop5jy/ it would be nice if instead of
<input :value="todo.text" @input="updateTodoText(todo, $event.target.value)"> we could do <input v-model="todo.text" "> and the changes would be persisted back to the Firebase database. Is this impossible or just difficult?

Thank you,
Bentley

doesn't work in .vue files

will occur a 'Firebase undfined' error.

No data is being returned

I've been playing around with vuefire for a bit now, and can't seem to get it to return any data. I thought it could be my database rules, so for testing I even opened them up completely, but still nothing. I tried both a regular environment and module environment using webpack. No errors are returned, and in the vue.js dev tools it just shows this:

this is my code:

var config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    storageBucket: "...",
    messagingSenderId: "..."
  };

const firebaseApp = firebase.initializeApp(config)
 const db = firebaseApp.database()
 const usersRef = db.ref('Users')

export default {
data () {
  return {

  }
},
firebase: {
  users: usersRef
}
}

I've tried different references and everything, but nothing is returning. Any idea what could be going wrong?

Dont have uid

How can i get uid like this example

firebase: {
anArray: db.ref('url/to/my/collection' + uid),

}

Its hard because i store the logged user into Vuex, but i dont have access vue scope in firebase: {}

Synchronous firebase.auth().currentUser replaced with Asynchronous onAuthStateChanged - causing 'not defined' error.

Hey,

Firstly, thanks for the hard work in getting Vuefire 1.1.0 out.

In the Firebase 2.x.x SDK we had the synchronous getAuth() which returned authorisation and user information.

In the 3.x SDK this has been replaced with firebase.auth().onAuthStateChanged which is asynchronous (there's also firebase.auth().currentUser but that returns null when the auth object has not finished initialising which seems to take a long time).

If you have a Firebase path that depend on the users UID, for example:

userLists = firebase.database().ref('/lists/' + userUID);

and in Vue:

firebase: {
        lists: userLists
}

The code now return a 'userLists not defined' error, as we must wait for firebase.auth().onAuthStateChanged to return the user object containing the UID.

Is there any best way to deal with this, where Vue waits for the object to be returned or something similar?

I tried a ternary operator on userLists, but got either a 'VueFire: invalid Firebase binding source' or 'source.on is not a function' error.

Cheers.

vuefire computed props issues, looking for guidance.

Hello, I'm obviously doing this incorrect but I was wondering if you could give me some guidence.
Basically im trying to get the first place team by sorting an array but for some reason the array is empty in the computed prop.
in the console it shows that app.teams is an array but for some reason this.teams is undefined .

here is my code.

                var playersRef = db.ref('players');
                var teamsRef = db.ref('teams');
                var eventsRef = db.ref('events');
            
                //sched_setup();
                
                var app = new Vue({
                      el: '#app',
                      data: function(){
                          return {
                            //default_events: default_events,
                            //firstPlaceTeam : {},
                            news : []
                          }
                      },
                      firebase : {

                              players: playersRef.limitToLast(30),
                              teams: teamsRef.limitToLast(7),
                              events: eventsRef.limitToLast(7)

                      },
                    computed: {
                        calculatePlace: function() {
                            return _.orderBy(this.teams, ['stats.P','stats.GP'], ['desc','asc'])
                        },
                        firstPlaceTeam : function(){
                            /* old code to find out first place team
                            firstplace = _.orderBy(this.teams, ['stats.P','stats.GP'], ['desc','asc'])[0];
                            if(this.firstPlace != firstplace.id && this.firstPlace != -1){
                                audio.play();
                                console.log("play");
                            }
                            this.firstPlace = firstplace.id;
                            */

                            return this.teams[0]; // undefined... why?

                        }
                    },
                    methods : {
                        testSelect: function (obj) {

                            console.log(obj.target.value);

                        },
                        eventWinner: function (event, match_index, winner, loser) {

                            logEvent(event, match_index, winner, loser);
                            console.log("winnnnneerrr");

                        }
                    }


                });

I'm really at a giving up point lol.
Any help would be appreciated.

key of pushed item

If I want to get the key of a pushed item I found I can do something like this:

someRef.push(newItem).then(function(result) {
  var key = result.path.o[1]
  // do something with key
})

Will the path.o property possibly change in future versions? Is there a better way to get the key of a newly pushed item that I'm missing?

Using vuefire with Auth (getting currentUser)

I've been looking at #18, #47 and #48, but I'm still confused about the best way to deal with authentication using vuefire.

On my main.js I'm using woodberry's approach and calling the unsubscribe function after authentication:

const unsubscribe = fb.auth().onAuthStateChanged((user) => {
  new Vue({
    el: '#app',
    template: '<App/>',
    components: { 
      App 
    },
    router
  });

  // stop listening
  unsubscribe()
})

My understanding is that by using this pattern, we delay the creating of the Vue instance until Firebase authenticates the user.

On my routes.js I use beforeEnter navigation guards to ensure that the user is authenticated:

    function requireAuth(to, from, next) {
      if (!fb.auth().currentUser) {
        console.log("User is not logged in");
        next({
          path: '/auth',
          query: { redirect: to.fullPath }
        })
      } else {
        console.log("User is logged in:", auth.currentUser.uid);
        next()
      }
    }

    export default [
      { 
        path: '/students', 
        component: StudentIndex,
        beforeEnter: requireAuth
      }
    ]

Then on my StudentIndex.vue component, I access the firebase database reference /users/${uid}/students, but when I load the http://mydomain.com/students URL, I get an error:

  export default {
    // this doesn't work: Uncaught TypeError: Cannot read property 'uid' of null
    firebase: {
      students: firebase.database().ref('users')
                  .child(firebase.auth().currentUser.uid)
                  .child('students')
    }
  }

However, if I create the reference manually using $bindAsArray in the created hook, it works:

  export default {
    // this works
    created() {
      this.$bindAsArray('students', 
        firebase.database().ref('users')
          .child(firebase.auth().currentUser.uid)
          .child('students')
        )
    }
  }

Is this to be expected or am I missing something?

The thought of having to define my firebase references differently depending on whether the path includes the user id or not seems a little weird, so I'm sure I must be missing something.

detailed example - vue2 components

Hello experts!

am a beginner with vuejs, and so far I absolutely love it. Does anyone have a example application with vuefire using the Vue2 components (.vue files).

I was also thinking if there is a clever way of integrating the firebase library with Vuex. Then the developer have to update the structures in the state and it somehow asynchronous with the firebase db. That would be very interesting.

[question] vuefire inside a vuex store.js file ?

Has anyone managed to set up a working solution with firebase and vuex?
I've managed to put something together with vuex and firebase.

• All calls (crud) to firebase are done from within vuex actions.
• The firebase callbacks/listeners trigger the vuex mutations.
  All works well, the vuex store always stays in sync with firebase.
  However, the view model (vue page) sometimes doesn't get updated anymore. The listener breaks for some reason.
  Anyway, I wonder if vuefire would work well with vuex. From what I see in the examples, vuefire is linked directly to the view model of vue components. Would vuefire also be use useful in a vuex store.js file?

When is binding completed?

Newbie here, hope it's a good question.
When I bind an array to a server ref, I want to know when the binding is completed and the data available in the vue object. Is that somehow possible?
Thanks for such a nice library!

two-way binding

I'm trying to achieve two-way data-binding with vue and firebase.

So that using:
firebase: { events: (new Firebase('https://myfirebase.firebaseio.com/events')) },

and in the html:
<li v-for="obj in events"> <input v-model="obj.id" /><input v-model="obj.event_name" /> </li>

will allow me to update firebase directly from the inputs.
Is it currently possible with this project?
how would you implement it?

With Firebase 3: TypeError: e.key is not a function

Attempting to use vuefire with the new update of Firebase (firebase.google.com) doesn't work, but does fill the console with a whole lot of errors.

A simple example (also using vue-router):

var database = firebase.database();
var app = Vue.extend();
var router = new VueRouter();

router.on('/fishes', {
  component: {
    template: '<ul><li v-for="fish in fishes">{{fish.name}}</li></ul>',
    route: {},
    firebase: {
      fishes: database.ref('fishes')
    }
  }
});

router.start(app, '#app');

With data structured like:

"firebase-instance-name-12345": {
  "fishes": {
    "first-fish-slug": {
      "name": "Betta"
    },
    "second-fish-slug": {
      "name": "Great White"
    }
  }
}

Results in a lot of errors in the console like:

TypeError: e.key is not a function. (In 'e.key()', 'e.key' is "first-fish-slug")
FIREBASE WARNING: Exception was thrown by user callback. n@https://cdn.jsdelivr.net/vuefire/1.0.0/vuefire.min.js:1:578

TypeError: e.key is not a function. (In 'e.key()', 'e.key' is "second-fish-slug")
FIREBASE WARNING: Exception was thrown by user callback. n@https://cdn.jsdelivr.net/vuefire/1.0.0/vuefire.min.js:1:578

...and so on.

I'm guessing it's a difference in how Firebase is supplying the data structure in the v3 of their API.

$bindAsArray don't update binded data dynamically

I'm trying to bind a child node dynamically after the event changes.

...
var db = firebaseApp.database().ref('data/')

new Vue({
  el: '#app',
  data: {
    current: 'first',
    currentNode: []
  },
  firebase: {
    myArray: db
  },
  ready() {
    this.$bindAsArray('currentNode', db.child(this.current))
  },
  watch: {
    'curent': function(node) {
      console.log(node)
      this.$bindAsArray('currentNode', db.child(this.current))
    }
  },
  methods: {
    pushToNode() {
        this.$firebaseRefs.currentNode.push({
          hello: 'hello',
          world: 'world'
        })
      }
  }
})

and I expect to receive data at the output on binded array like this:
<pre>{{ currentNode | json }}</pre>

I have made 2 fiddle examples
First with $bindAsArray which does not update the state after the event triggering.
https://jsfiddle.net/tpq0x7zu/1/

And second one with $bindAsObject which updates the data after the child node changes.
https://jsfiddle.net/f95a1zwx/5/

Firebase ref in tests doesn't have the rights

Right now tests are failing because we use a ref we don't have the rights to access anymore oss-test.firebaseapp.com.
@jwngr Do you have any advice about what to use for tests? I found incomplete, unofficial mocks and a Firebase server that seemed to be have many caveats making it hard to use for tests.

src folder is missing after npm install

For some reason the src folder is missing after 'npm install vuefire', which causes:
Module not found: Error: Cannot resolve module 'vuefire' in webpack

Auth examples

Hi there,

I'm having trouble getting auth to work. I have successfully implemented the ability to create and login to an account, but I'm having trouble getting the currentUser with the function onAuthStateChanged.

Does anyone have any Vue 2.0, vue-router, and Firebase 3+ examples of auth successfully implemented that would steer me in the right direction?

/views/Auth.vue

<script>
  import firebase from '../services/firebase.js'

  export default {
    data() {
      return {
        email: '',
        password: '',
        confirmPassword: '',
        wantsToSignUp: false,
        errorMessage: '',
      };
    },
    methods: {
      signUpWithPassword() {
        if (this.password === this.confirmPassword) {
          firebase.auth.createUserWithEmailAndPassword(this.email, this.password)
          .then(() => this.signInWithPassword())
          .catch((error) => { this.errorMessage = error.message });
        }
      },
      signInWithPassword() {
        return firebase.auth.signInWithEmailAndPassword(this.email, this.password)
        .then((userData) => {
          this.onSignedIn();
          return userData;
        })
        .catch((error) => { this.errorMessage = error.message });
      },
      onSignedIn() {
        this.$router.go('/');
      },
    },
  };
</script>

AppNav always reports unknown user.title after I am logged in.

/components/AppNav.vue

<script>
  import firebase from '../services/firebase.js'

  export default {
    data() {
      return {
        user: null,
        searchQuery: '',
      };
    },
    methods: {
      processUser(authed) {
        console.log(authed);
        if (authed === null) {
          this.user = null;
          return;
        }
        this.user = {
          title: authed.email || '',
        };
      },
      signOut() {
        firebase.auth.signOut();
        this.$router.go('auth');
      },
    },
    ready() {
      firebase.auth.onAuthStateChanged(this.processUser);
      this.processUser(firebase.auth.currentUser);
    },
  };
</script>

this is undefined when binding

props: ['roomId'],
firebase: {
    messageList: db.ref('/room/${this.roomId}/messages'),
    user: {
      source: userRef,
      asObject: true,
    },
  },

I got roomId of undefined error.
How can I use this when binding?

Using `.key` in track-by throws error

When trying to track by .key I get the following error:

[Vue warn]: Invalid expression. Generated function body: .key

Template code:

<ul>
  <li v-for="guest in guests" track-by=".key">{{ guest.name }}</li>
</ul>

Edit: I also tried wrapping .key in single quotes, eg:

  <li v-for="guest in guests" track-by="'.key'">{{ guest.name }}</li>

but that began throwing duplicate value errors.

[Question] access to firebase data through "created()" or "mounted()"

Hi again!! 😄

The VueFire just works perfectly in components template, all was reactive and evreything is allright,

But there is One Thing that drives me crazy today. 🤔

When I try to use firebase data through created() or mounted() methods in my component, it just become an empty Array.

.
.
.
mounted(){
      console.log(this.messages) // [_obj_: Observer] => Array[0]
      // expected to be [Object, Object , _obj_ : Observer] => Array[n]
},
firebase(){
      return {
           messages: . . . .
      }
}

It is difficult for me to understand how to use all firebase features

Hi, my friends,

I have learned the feature of "vuefire" and tried an example successfully. In a component to get the data from firebase like this:

const componentsRef = new Firebase('https://project-d40ad98.firebaseio.com/components')
export default {
    name: 'NewSectionDialog',
    firebase: {
      comps: componentsRef
    },
}

But I have some questions on this.

1. In a big project, did i need new one Firebases in each component which needs to get itself data? If yes, it would be have many firebase in one project.
2. I learned how to control one data depend on vuefire and firebase, but how could i using the storage to control the files. If like this:

const storageRef = new Firebase('https://project-d40ad98.firebaseio.com').storage().ref()
const uploadRef = storageRef.child('upload')
export default {
    name: 'UploadImage',
    firebase: {
        upload: uploadRef
    },
}

All of this questions because i am quite difficult to understand the firebase and how to use. Could you help me? Help me with giving some examples and i am very smart to get the knowledge.

Thank you for your time and kindness.

Querying with params from $route

I came to realise that if I pass a function to firebase like I would pass to data in one of my
components, it does not get called. I want to pass a route parameter to my query innovation.

# editor.vue
  firebase: ->
    console.log 'evaluating' # not logging
    data = 
      innovation: db.innovation @$route.params.innovation_slug

# alternative editor.vue: this is effectively binding innovation to the data source
  firebase:
    innovation: db.innovations() # query working, but route not available

# db.coffee
module.exports = ->
  url = 'project-2654865812003744343.firebaseio.com'

  firebase =
    innovation: (slug) =>
      ref = new Firebase url
      ref.child('innovations').orderByChild('name').equalTo(slug)

    innovations: =>
      ref = new Firebase url
      ref.child 'innovations'

  return firebase

I also tried binding the data sources in the ready hook.

# editor.vue
  ready: ->
    @$bindAsObject('innovation', db.innovation(@$route.params.innovation_slug)) # not binding

Am I doing something wrong? Do you have a recommended approach or a working example?

Incompatible with Firebase 3.x.x!

It seems vuefire is no longer compatible with firebase since google took over firebase and moved it to 3.x.x?

What's the timeline on getting this fixed?

TypeError: e.key is not a function with Firebase 3 and Vuefire 1.1.0

FIREBASE WARNING: Exception was thrown by user callback. TypeError: e.key is not a function
at n (https://cdn.jsdelivr.net/vuefire/1.1.0/vuefire.min.js:1:575)
at https://cdn.jsdelivr.net/vuefire/1.1.0/vuefire.min.js:1:1091
at https://www.gstatic.com/firebasejs/3.0.3/firebase.js:377:375
at Tb (https://www.gstatic.com/firebasejs/3.0.3/firebase.js:271:165)
at uc (https://www.gstatic.com/firebasejs/3.0.3/firebase.js:258:215)
at vc (https://www.gstatic.com/firebasejs/3.0.3/firebase.js:257:1165)
at pf.g.Hb (https://www.gstatic.com/firebasejs/3.0.3/firebase.js:445:287)
at kh.g.wd (https://www.gstatic.com/firebasejs/3.0.3/firebase.js:420:251)
at Ye.wd (https://www.gstatic.com/firebasejs/3.0.3/firebase.js:323:364)
at rd.fg (https://www.gstatic.com/firebasejs/3.0.3/firebase.js:321:280)
firebase.js:271 Uncaught TypeError: e.key is not a function

Array bindings don't cooperate with array methods and arrow functions

I have something similar to this in a component:

<template>
  <p>{{ filteredCollection }}</p>
</template>

<script>
// DATABASE is the Firebase.initializeApp object
import DATABASE from '../firebase.js'

export default {
  computed: {
    filteredCollection () {
      return this.someCollection
        .map(collectionItem => { collectionItem.someProperty })
    }
  },
  firebase: {
    someCollection: DATABASE.ref('someCollection')
  }
}
</script>

I should expect to see the output, once fully updated, to be something like:

<p>[ "property value on first item", "property value on second item", "property value on third item", ... ]</p>

Instead, I only ever get this, no matter how long I wait:

<p>[ null, null, null, ... ]</p>

Somewhere along the line it's supplying the correct number of items to the map method, but never actually updates with the loaded values for the collectionItem objects.

Interestingly, it works perfectly fine if I take exactly the same code and replace

.map(collectionItem => { collectionItem.someProperty })

with

.map(function (collectionItem) { return collectionItem.someProperty })

...even though there's no obvious reason that binding the this context like that would or should affect the value of the item.

Why executes a computed function twice?

I have a component that collects data from Firebase. The data contains subscriptions (236) of people that subscribe to courses (21) with a specific date.

In a computed property (of the component) I get the unique dates and store them in an array. This array is the base for the v-for in the component. So a list of unique dates is listed (in a panel-group), and every panel shows the subscribers for that particular date.

I console log this computed property (named courseDates) and see that this function is executed twice. Btw, the first time it executes no date is there (yet). In the second cycle it has the data.

Am I doing something wrong here, that it executes twice to collect the data from firebase? Does this sound familiar? Is this a bug? Hope to here from you...

Below the code of the component...
If needed, I can share code via Github repo.

Vue.component('my-subscriptions', {

  props: ['display', 'signInStatus'],

  data: function () {
    return {
      title: 'subscriptions',
      selectedDate: 0,
      filterBy: '',
      date: '',
      loading: true
    }
  },

  firebase: {
    subscriptions: db.ref('subscriptions').orderByChild('date');
  },

  mounted: function() {
    // because loading is cached, set this.loading to true
    this.loading = true;
  },

  events: {},

  computed: {

    courseDates: function() {
      console.log('courseDates'); // get executed twice
      var dates = _.sortedUniqBy(this.subscriptions, 'datum'),
          datesSorted = [];

      // only if there are any dates
      if(dates.length>0){
        // loop through the dates
        dates.forEach(function(data) {
            var date = moment(data.date, "DD-MM-YYYY").format('x');
            // collect the newly formated dates
            if(data.date !== undefined) {
              datesSorted.push(date);
            }
        });
        // then sort them on chronologic order
        datesSorted.sort(function(a,b) {
          return b-a;
        });
        // finaly, format the dates in a format (DD-MM-YYYY) originally stored
        // for queryingitg purpose
        var datesFormated = datesSorted.map(function(date) {
          var d = moment(date, 'x').format('L');
          return d;
        });
      }
      return datesFormated;
    },

  },

  methods: {},

  template: `
<div class="panel panel-default" v-for="(date, index) in courseDates">....</div>
`
});