问题
I am fairly new to VueJs and Firestore and I am having a couple of rookie teething problems that I can't quite answer using the documentation. I apologise in advance if this is answered elsewhere, I have been trawling for the last couple of days and couldn't see anything that was directly helpful.
So my problem is two-fold:
1) How do I access subcollections in Firestore? - I read that this functionality is now available and I believe you can dive into these subcollections using db.collectionGroup queries however I haven't had much luck using this method.
2) Using the data in VueJs - I am trying to start simple and use this data to populate a basic 'ingredients' table. Assuming I can grab the data from these subcollections, how do I navigate to them? I have been using the v-for method so far.
Firebase Structure so far:
I have set up my Firestore with this structure:
https://i.imgur.com/Kijb7GC
'recipes' is the root collection. Inside this I have a document (an individual recipe) which has an author and recipe title field. It also has an ingredients subcollection which is structured as follows:
https://i.imgur.com/YuE3FWk
Each document inside the ingredients subcollection is a key value pair with one ingredient and it's corresponding quantity. The idea is to have a list of different ingredients for each recipe.
My Vue code:
I have set up a quick table which looks like:
https://i.imgur.com/HfYP9kz
which results in this awful looking thing:
https://i.imgur.com/aO2gUtH
Hopefully you can see that in the first half of the table code I am able to pull out the recipe title and author and populate the first table row. I need to quickly apologise and mention that the image of my table was taken before I attempted to put in the {{recipe.ingredients.ingredient}}. Anyway..
What I don't know how to do is to dip into the subcollections part and grab the ingredients and quantities to populate the subsequent rows (I had a rookie stab at it...)
At the moment this is the code that is grabbing the recipe collection data:
https://i.imgur.com/BzuYjzp
I am assuming that this is only grabbing the 'surface' level data i.e the author and recipe title but isn't pulling through the subcollection data too.
If you are still with me - great!
What I am trying to understand is:
a) If possible, how do I grab the subcollection data using the db.collection technique?
b) How can I access this data in the v-for method?
Any help is much appreciated. Its a bit of learning curve and I don't have any one I can hassle in the real world!
来源：https://stackoverflow.com/questions/56358372/accessing-and-using-firestore-subcollection-data-using-vuejs-rookie-question