鍍金池/ 問(wèn)答/HTML/ vue實(shí)現(xiàn)動(dòng)態(tài)生成表單出現(xiàn)的問(wèn)題？

vue實(shí)現(xiàn)動(dòng)態(tài)生成表單出現(xiàn)的問(wèn)題？

有一個(gè)實(shí)現(xiàn)動(dòng)態(tài)表單的需求，我是這樣實(shí)現(xiàn)的

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

通過(guò)動(dòng)態(tài)添加arr可以實(shí)現(xiàn)表單動(dòng)態(tài)生成。
圖片描述

但是如果是填寫(xiě)后的input，刪除填寫(xiě)2的表單之后，arr長(zhǎng)度變成1，填寫(xiě)2的表單還在，填寫(xiě)3的表單不見(jiàn)了，有什么好的方法解決這個(gè)問(wèn)題嗎？

回答
編輯回答
解夏

index做key會(huì)存在這個(gè)問(wèn)題，當(dāng)你刪除再添加的時(shí)候，就會(huì)出現(xiàn)key重復(fù)的情況

2017年11月27日 21:36
編輯回答
魚(yú)梓

不能直接index做key,那是無(wú)效的
需要用其他的唯一值做key
比如

return {
                arr: [],
                index: 1,
            }
key="index"
addItem () {
      this.arr.push(this.index)
                this.index++;
    },
2017年7月17日 06:18
編輯回答
尐飯團(tuán)

數(shù)據(jù)存在變動(dòng)的情況時(shí)不建議用index作為key,
建議arr中的數(shù)據(jù)使用對(duì)象的的形式如 [{id: 'abc'}],
便于之后的擴(kuò)展，新生成的可用用時(shí)間戳作為id值

2018年5月21日 07:35