Support of $bind with nested key path

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

[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 🙂