Я довольно новичок в VueJs и Firestore, и у меня возникла пара проблем с прорезыванием зубов новичка, на которые я не могу ответить, используя документацию. Я заранее прошу прощения, если на этот вопрос ответили в другом месте, я трал последние пару дней и не мог видеть ничего, что было бы непосредственно полезным.
Итак, моя проблема двоякая:
1) Как получить доступ к подколлекциям в Firestore? - Я прочитал, что эта функциональность теперь доступна, и я полагаю, что вы можете погрузиться в эти подколлекции с помощью запросов db.collectionGroup, однако мне не очень повезло с использованием этого метода.
2) Использование данных в VueJs - я пытаюсь начать с простого и использовать эти данные для заполнения базовой таблицы «ингредиентов». Предполагая, что я могу получить данные из этих подколлекций, как мне перейти к ним? До сих пор я использовал метод v-for.
Структура Firebase до сих пор:
Я настроил мой Firestore с такой структурой:
https://i.imgur.com/Kijb7GC
'recipes' - корневая коллекция. Внутри этого у меня есть документ (индивидуальный рецепт), который имеет поле автора и заголовок рецепта. Он также имеет подколлекцию ингредиентов, которая имеет следующую структуру:
https://i.imgur.com/YuE3FWk
Каждый документ внутри подколлекции ингредиентов представляет собой пару ключ-значение с одним ингредиентом и его соответствующим количеством. Идея состоит в том, чтобы составить список различных ингредиентов для каждого рецепта.
Мой код Vue:
Я установил быстрый стол, который выглядит так:
https://i.imgur.com/HfYP9kz
, что приводит к этой ужасно выглядящей вещи:
https://i.imgur.com/aO2gUtH
Надеюсь, вы видите, что в первой половине кода таблицы я могу вытащить заголовок и автора рецепта и заполнить первую строку таблицы. Мне нужно быстро извиниться и упомянуть, что изображение моего стола было снято до того, как я попытался вставить {{recipe.ingredients.ingredient}}. Во всяком случае ..
Что я не знаю, как это сделать, так это окунуться в часть подколлекций и взять ингредиенты и количества, чтобы заполнить последующие ряды (у меня был удар новичка в этом ...)
На данный момент это код, который захватывает данные коллекции рецептов:
https://i.imgur.com/BzuYjzp
Я предполагаю, что это только захват данных «поверхностного» уровня, то есть автора и названия рецепта, но также не перетягивание данных подколлекции.
Если вы все еще со мной - отлично!
Я пытаюсь понять:
a) Если возможно, как мне получить данные подколлекции, используя технику db.collection?
б) Как я могу получить доступ к этим данным в методе v-for?
Любая помощь очень ценится. Это немного кривая обучения, и у меня нет никого, с кем бы я мог суетиться в реальном мире!