[Question] Dynamic bindings

[ghost]

Hi there!

Quick question as we are tossing up whether to upgrade to Firestore. Can you do dynamic bindings like you can in Vuefire? e.g. if you need to get the authenticated users UID and then use this to build your binding e.g. user/{uid}, noting that an async call is made on the beforeCreate so this information is not available at the time the Vue component is built. Is this possible in this library?

Thanks a lot!

[amranidev]

You could do that manually, in fact the cloud firestore concept is different than classical realtime database, so the firesotre doesn't allow you to refer to a record with firestore.collection(user/{uid}). you can only retrieve it with firestore.collection("users").doc(userID).

Unfortunately vue-firestore doesn't support bindings for docs, However, we will add this feature ASAP!!.

Otherwise you can implement your use case in many ways with the current release!

• You can listen to a specific collection via firestore function in the vue instance.

....
firestore() {
    return {
         users: firestore.collection("users")
    }
}
....

• You can specify you path manually with this.$binding to bind to a specific user info or action, for example.

...
mounted() {
   ...
    // vue-firestore will bind on users/{userID}/info
    this.$binding("person", firestore.collection("users").doc(this.userID).collection("info"))
   ...
}
...

I hope this answer your question, feel free to submit any issue or pull request, feedbacks are always appreciated.

Thanks

[ghost]

Thanks for the great response. I like the sound of supporting bindings for docs. Thanks a lot mate.

[amranidev]

@natezerk , I would like to inform you that vue-firestore is supporting the both of (collection/docs) in this new release v0.2.0, now you can bind your docs/collection in two ways, manually or via firestore option.

• Binding Manually with $binding function that return a promise.

...
mounted() {
  // Binding Collections
  this.$binding("users", firebase.firestore.collection("users"))
  .then((users) => {
    console.log(users) // => __ob__: Observer
  })

  // Binding Docs
  this.$binding("Ford", firebase.firestore().collection("cars").doc("ford"))
  .then((ford) => {
    console.log(ford) // => __ob__: Observer
  }).catch(err => {
    console.error(err)
  })
}
...

• Binding via firestore option.

var vm = new Vue({
  el: '#app',
  firestore() {
    return {
        // Collection
        persons: firestore.collection('persons'),
        // Doc
        ford: firestore.collection('cars').doc('ford')
    }
  }
})

Thanks!!

[ghost]

Nice work thanks a lot!

[codekote]

There is problem with put data to child component via Props. In child component on created() hook Props data is undefined.