javascript - .splice() 不断删除数组的最后一项

Question

我在我的表单上创建了一个功能，我可以通过单击一个按钮为多个图像添加多个文件输入，这按预期工作。现在，当我尝试使用 .splice 删除输入字段时，它会不断删除我的输入字段所在的数组的最后一项，而不是具有匹配索引的输入字段。几个小时以来，我一直在尝试解决这个问题，但我似乎找不到解决方案。我希望有人能告诉我我做错了什么。

这是添加新输入字段的方法:

addInputField() {

    i++

    this.values.links.push({
      id: i,
      url: ''
    });
  }

这是删除输入框的代码:

deleteInputField(index) {

    this.values.links.splice(index, 1);

    const items = this.values.links.filter(item => {

      return item.id > index
    });

    items.forEach(function (item) {
      item.id = item.id -1;
    });
  }

这是删除输入字段的按钮:

<v-icon
  medium
  v-if="link.id > 0"
  color="#FF0000"
  class="ma-4"
  @click="deleteInputField(link.id)"
>

Answer 1

如果你想传递id(link.id)，就用这个函数。

function deleteInputField(itemId){
    this.values.links = this.values.links.filter(item => {
        return item.id !== itemId;
    });
}

这将遍历数组并返回除与传递的 itemId 具有相同 id 之外的所有数组。

否则，只需在@click 处理程序中传入来自 v-for 循环的索引

deleteInputField(index) {
    this.values.links.splice(index, 1);
  }