Support of $bind with nested key path

[andrewspy]

I intend to $bind a collection of documents under docs by id. It seems to work, and wonder if it is supported officially.

const documents = db.collection('documents')

export default {
  props: ['documentId'],
  data: () => ({ docs: { }}),
},
  watch: {
    documentId(id) {
      // $bind automatically unbinds the previously bound property
      this.$bind(`docs.${id}`, documents.doc(id))
    },
  },
}

[posva]

It's not completely supported yet. BTW you should declare id inside docs

Duplicate of #152

[andrewspy]

@posva Actually I intend to have dynamic id, instead of a static one, as I need to listen to changes in dynamic id (such as a list of saved stock symbol).

I've also seen #152, and though it refers to firebaseRTDB, while I'm referring to firestore.

I would also like to know if there is any workaround for dynamic $bind() of keys. Thanks!

[posva]

#152 is for both

For dynamic keys, you should sett them with Vue.set before binding

[andrewspy]

@posva Thanks for the pointer, I manage to get it working with:

const documents = db.collection('documents')

export default {
  props: ['documentId'],
  data: () => ({ docs: { }}),
},
  watch: {
    documentId(id) {
      // $set manually for reactivity to work
      this.$set(this.docs, id, null)
      this.$bind(`docs.${id}`, documents.doc(id))
    },
  },
}

I noticed that when binding this way, $bind always return undefined instead of Promise<Object> as per documentation.

I would also propose having a topic on "Dynamic binding with Vue.set" in the documentation as this is common use-case.

[posva]

Added to the roadmap #145 🙂