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

Answer 2

不能直接index做key,那是无效的
需要用其他的唯一值做key
比如

return {
                arr: [],
                index: 1,
            }
key="index"
addItem () {
      this.arr.push(this.index)
                this.index++;
    }, 

       

Answer 3

数据存在变动的情况时不建议用index作为key,
建议arr中的数据使用对象的的形式如 [{id: 'abc'}],
便于之后的扩展，新生成的可用用时间戳作为id值

Answer 4

可以使用form-create动态生成表单,form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单动态生成组件。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。github地址

目前以支持如下 UI

ElementUI 版本

npm i @form-create/element-ui

Iview 版本 2.x|3.x

npm i @form-create/iview

Iview 版本 4.x

npm i @form-create/iview4

Ant-design-vue 版本 1.5.3+

npm i @form-create/ant-design-vue