Question

我正在使用Vue和Rails。当用户在添加新配方和返回主页之间切换时，下面代码的目标是从输入字段中删除文本。这适用于我的所有领域，除了成分。

Ingredients是一个属于配方对象的数组，它在一个键值对中保存一个名称。我想循环使用并删除所有成分。我通过调用removeIngredients函数来做到这一点。问题是当我执行下面的代码时，循环只捕获每个其他索引，因此只删除了一半的成分。

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);
        }
      }
    }
  },

配方对象代码

recipe: {
    name: '',
    chef: '',
    cooktime: '',
    amount: '',
    description: '',
    favorite: false,
    ingredients: [
      {name: ''},
    ]}

当我创建四个名为1,2,3,4的成分时，Console.log会返回。基本上1和3成功通过并被删除，而当我返回表单时，2和4仍然存在。

name = name
i = 0
this.recipe.ingredients[i][name] 1

name = name
i = 1
this.recipe.ingredients[i][name] 3

Answer 1

向后遍历数组，所以从最后一个索引到0.这样你就可以删除它们了。此外，当您实际删除内循环时，应该打破内循环：

for (var i = this.recipe.ingredients.length - 1; i >= 0; i--){ // <-- change direction
  for (var name in this.recipe.ingredients[i]){
    if (this.recipe.ingredients[i].hasOwnProperty(name)){
      this.removeIngredient(i);
      break; // <------ add this
    }
  }
}

循环使用JavaScript数组对象并删除值

1 个答案: