vue实现动态生成表单出现的问题？

Question

有一个实现动态表单的需求，我是这样实现的

<template>
  <div class="container">
    <div class="form-gtoup">
      <input type="text" name="" id=""><button @click="addItem">add</button>
    </div>
    <div class="form-gtoup" v-for="(item,index) in arr" :key="index">
      <input type="text" name="" id=""><button @click="minusItem(index)">minus</button>
    </div>
  </div></template>export default {
  data() {
    return {
      arr:[]
    };
  },
  methods: {
    addItem () {
      this.arr.push('')
    },
    minusItem (index){
      this.arr.splice(index, 1)
    }

通过动态添加arr可以实现表单动态生成。

但是如果是填写后的input，删除填写2的表单之后，arr长度变成1，填写2的表单还在，填写3的表单不见了，有什么好的方法解决这个问题吗？

Answer 1

index做key会存在这个问题，当你删除再添加的时候，就会出现key重复的情况