I'm creating a recipes app just to learn Vue and Firebase Realtime Database.
This is the recipe structure:
{
"name": "Stackoverflow shake",
"description": "",
"ingredients": {
"-MLikewQrETdTWM12NVY": {
"color": "red",
"name": "Strawberries"
},
"-MLilh_HCnqX7Op7QmZ9": {
"color": "purple",
"name": "Pear"
}
}
}
And this is the ingredient structure:
{
"name": "Pear",
"color": "purple"
}
I have no problem creating or updating the recipe, but when I update an ingredient, to just change it's color, I'm having troubles to update all the recipes that contain that ingredient in particular.
Say I update the ingredient Pear to color: "green". The recipe Stackoverflow shake
is still showing the Pear purple.
I guess that I have to iterate all the recipes that contains Pear, and update the color but I can't filter them.
What I tried:
updateIngredient({state}, payload) {
// THIS WORKS
db.ref("ingredients/" + payload.content.id)
.update(payload.content).then((test) => {
console.log(test);
});
// THIS DOESN'T WORK (doesn't filter only the recipes that contain that ingredient
let query = db.ref('recipes').orderByChild(
'ingredients/' + payload.content.id);
query.once('value', function (snapshot) {
snapshot.forEach(function (recipeSnapshot) {
console.log(recipeSnapshot);
db.ref('recipes/' + recipeSnapshot.key + '/ingredients/'
+ payload.content.id).update(payload.content);
})
});
},
The second part of that method just adds the Pear ingredient to all the recipes, it doesn't filter the recipes to only the ones that have Pear.