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

Question

我在表单上创建了 function，我可以通过单击按钮为多个图像添加多个文件输入，这按预期工作。 现在，当我尝试使用 .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

links是一个对象数组。 您不是在该数组中传递索引，而是在嵌套的 object 中传递一个 id。

<v-icon
  medium
  v-if="link.id > 0"
  color="#FF0000"
  class="ma-4"
  @click="deleteInputField(link.id)" // Change to index (mostly taken from v-for loop)
>

Answer 2

从splice方法的定义来看，第一个参数是start：

开始更改数组的索引。 如果大于数组的长度，start 将被设置为数组的长度。 如果为负数，它将从数组末尾开始那么多元素（原点 -1，意味着 -n 是倒数第 n 个元素的索引，因此等效于 array.length - n 的索引）。 如果 array.length + start 小于 0，它将从索引 0 开始。

如果您单步执行代码，您将意识到您传递的 id 不是 links 数组中链接的实际索引，而是大于数组长度的链接 id

Answer 3

如果要传递 id（link.id），只需使用这个 function。

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

Answer 4

如果需要将索引传递给 deleteInputField function，则 ID 不是索引，您可以通过this.values.links.splice(index, 1);