vuejs2 - 使用 VueJS 访问和使用 Firestore 子集合数据（菜鸟问题）

我对 VueJs 和 Firestore 还很陌生，我遇到了一些新手问题，我无法使用文档完全回答。如果在其他地方得到回答，我提前道歉，过去几天我一直在拖网，看不到任何直接有用的东西。

所以我的问题有两个：

1) 如何访问 Firestore 中的子集合？- 我读到现在可以使用此功能，我相信您可以使用 db.collectionGroup 查询深入了解这些子集合，但是使用此方法我运气不佳。

2) 使用 VueJs 中的数据 - 我试图从简单开始，并使用这些数据来填充基本的“成分”表。假设我可以从这些子集合中获取数据，我该如何导航到它们？到目前为止，我一直在使用 v-for 方法。

到目前为止的 Firebase 结构：

我已经用这种结构设置了我的 Firestore：

'recipes' 是根集合。在这里面我有一个文档（一个单独的食谱），它有一个作者和食谱标题字段。它还有一个成分子集合，其结构如下：

成分子集合中的每个文档都是一个键值对，具有一种成分及其对应的数量。这个想法是为每个食谱列出不同的成分。

我的 Vue 代码：

我设置了一个快速表，如下所示：

这导致了这个看起来很糟糕的事情：

希望您可以看到，在表格代码的前半部分，我能够提取出食谱标题和作者并填充表格的第一行。我需要快速道歉并提及我的桌子图像是在我尝试放入 {{recipe.ingredients.ingredient}} 之前拍摄的。反正..

我不知道该怎么做是深入到子集合部分并获取成分和数量以填充后续行（我有一个菜鸟刺伤它......）

目前这是获取配方收集数据的代码：

我假设这只是抓取“表面”级别的数据，即作者和食谱标题，但也没有通过子集合数据。

如果你还在我身边 - 太好了！

我想了解的是：

a) 如果可能，我如何使用 db.collection 技术获取子集合数据？

b) 如何在 v-for 方法中访问这些数据？

任何帮助深表感谢。它有点学习曲线，在现实世界中我没有任何可以麻烦的！

标签： vuejs2google-cloud-firestore