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重复的情况