时间戳

首页 > 解决方案 > .splice() 不断删除数组的最后一项

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

问题描述

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

标签： javascriptvue.jsnuxt.js

解决方案

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

推荐阅读