vuejs：从阵列重新呈现的所有后续项目中删除项目

Question

我有一系列在VUE模板中循环循环的对象，每个对象包含＆lt; input＆gt; s。用户有一个按钮可以在数组中添加其他项目 - 这些都可以很好地效果。 每个新组件都有一个唯一的键。

用户可以使用按钮删除任何添加的＆lt; s。这在 data.repeats 数组中正确工作 - 删除了该项目。还会更新DOM以删除此项目。

但是，如果我有4个项目并删除第二个项目，则项目3和4将被重新渲染（我可以看到它们已在Vue Dev工具中“更新”）。这将使添加到这些输入（或更改为DOM等）的所有数据。

这是在删除的物品之后才发生的。

根据我的理解，通过在组件VUE上使用：key 应该能够跟踪并重新渲染。

我认为这可能是因为我将项目存储在数组中，而在将一个键删除后，所有键都被一个键放置，所以我尝试使用具有永不更改的对象，但DOM中的结果是相同的 - 删除后的所有项目都将重新渲染。

有没有办法停止此？

<div v-for="(repeat, count) in repeats">
    <template v-for="field in repeat">
        <component
            :is="field.component" 
            :content="field.content"
            :key="field.content.dot_name"
        >
        </component>
    </template>

    <button @click="remove(count)">Remove</button>
</div>

<button @click="add">Add</button>

data() {
    return {
        repeats: []
    }
},

methods: {
    add() {
        this.repeats.push(this.cloneFields());
    },
    remove(key) {
        this.repeats.splice(key, 1);
    },
}

添加的项目：

input> input s（绿色）中添加的三个项目：

vue工具显示项目：

。

删除项目：

中间项目被删除 - 从最后一项（删除按钮显示循环索引）：

vue工具显示删除的项目和：：键在最后一项（...日记。 3 .sub ...） client> client_details.subsidiaries.3.subsidiary_company_name ：

Answer 1

尝试将键添加到 v-for =“（重复，计数）重复中” 循环

Answer 2

根据您的代码计数代表索引，因此对两个循环（例如添加键）（避免使用非键而不是使用字符串或数字）制作不同

键

<div v-for="(repeat, count) in repeats" :key="'outer' + count">

的

 <template v-for="(field, index) in repeat" :key="'inner' + index">

Answer 3

<div v-for="(item,index) in items" :key="item.id">
.....
<button @click="remove(item.id)">Remove</button>

将ID传递给参数

remove(id) {
  const index = this.items.findIndex(item => item.id === id)
  if (index !== -1) {
    this.items.splice(index, 1)
  }
}

您可以尝试以下链接：
https：//fontawsonsicons.com/ tryit/code/vue-js-remove-item-from-rom-array-by-id/0