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

Answer 2

links是对象的数组。您没有在该数组中传递索引，而是在嵌套对象内部传递了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 3

根据splice方法的定义，第一个参数是start：

开始更改数组的索引。如果大于数组的长度，开始将设置为数组的长度。如果为负，它将从数组（原点为-1，表示-n是第n个最后一个元素的索引因此等效于array.length-n的索引。如果array.length + start小于0，它将从索引0开始。

如果逐步执行代码，您将意识到所传递的ID并不是链结数组中链结的实际索引，而是大于数组长度的链结ID

Answer 4

如果您需要将索引传递给deleteInputField函数，则ID不是索引，您可以通过this.values.links.splice(index, 1);删除所需的输入字段>