In my Vue and Rails project, I am facing an issue with removing text from input fields when users switch between adding a new recipe and going back to the main page. While this functionality works for all fields except for ingredients, I am specifically struggling with deleting all ingredients from the array associated with the recipe object. Despite calling the removeIngredients function in a loop, only every other index is being captured, resulting in only half of the ingredients getting deleted.
resetNewRecipe: function(){
this.recipe.name = '';
this.recipe.chef = '';
this.recipe.cooktime = '';
this.recipe.amount = '';
this.recipe.description = '';
this.recipe.favorite = false;
this.recipe.ingredients.name = '';
for (i = 0; i < this.recipe.ingredients.length; i++){
for (var name in this.recipe.ingredients[i]){
if (this.recipe.ingredients[i].hasOwnProperty(name)){
console.log("name = " + name);
console.log("i = " + i);
console.log("this.recipe.ingredients[i][name] " + this.recipe.ingredients[i][name]);
this.removeIngredient(i);
}
}
}
},
The structure of the recipe object:
recipe: {
name: '',
chef: '',
cooktime: '',
amount: '',
description: '',
favorite: false,
ingredients: [
{name: ''},
]}
When testing with four ingredients named 1, 2, 3, and 4, only items 1 and 3 are successfully removed while 2 and 4 persist when returning to the form.
name = name
i = 0
this.recipe.ingredients[i][name] 1
name = name
i = 1
this.recipe.ingredients[i][name] 3