Firestore Add Sub-Collection Example

Well, I’ve been at it a week or too, and I’m just too green to figure out how to reference a sub-collection from within a template (if that’s even possible), or what the best way to get this data would be.

What Im attempting to accomplish is loop through a collection of tickets, in which each ticket has a sub-collection of comments. I’d want to display all comments, for each ticket in the list.

Heirarchy goes: DB > Tickets Collection > ticketdocs > Comments Collection > commentdocs

app.js:

const List = {
  template: require('./list.html'),
  // template: '<div>Ticket List!</div>',
  data: function () {
    return {
      tickets: [],
    }
  },
  firestore() {
    return {
      tickets:     db.collection('tickets'),
    }
  },
}

list.html.js:

<div v-for="ticket in tickets">
  <p>{{ ticket.comments }}
</div>

Displaying/iterating over {{ ticket }} works great and binds up fine, but accessing the sub-collection is where I’m stumped.

I’m sorry for such a basic request with poor descriptions/examples, but with the new Firestore sub-collections, Im sure some folks would love some examples of how to get access to sub-collections in the various ways available.

Thank you!

[SumNeuron]

can you please provide a clean example? I am struggling

[posva]

I don’t think is such a basic request, it’s definitely something worth looking at not easy to add in a declarative way. Unfortunately, after some research, I couldn’t find a way of reading the collections from a document (in the web sdk) (https://cloud.google.com/firestore/docs/query-data/get-data). Maybe I can add some API to allow the user bind collections on the document:

this.$bind('collection', collectionRef, { onDocumentBind })
function onDocumentBind(doc, bind) {
	// bind is bound to doc
	bind('comments', db.collection(`collection/${doc.id}/comments`), { onDocumentBind: () => {} })
}

this would allow me to automatically unbind the collection when document is unbound. But I still need to check if it’s feasible 🙂