vue中点击按钮添加一个div

点击按钮添加一次div里面包含多个字段，可以删除再新增，数据互不干扰

    <template>
    <div>
        <van-form ref="householderForm" @submit="add" @failed="uploadFailed">
            <div>
                <van-field 
                    required
                    maxlength="30"
                    label="农户代码" 
                    v-model="householderForm.familycode"
                    name="householderForm.familycode"
                    @input="inputFamilyCodeChange"
                    placeholder="请输入农户代码..."
                    :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                />
                <van-field 
                    required
                    maxlength="30"
                    label="农户姓名" 
                    v-model="householderForm.householderName"
                    name="householderForm.householderName"
                    placeholder="请输入农户姓名..."
                    :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                />
                <van-field 
                    required
                    label="性别" 
                    v-model="householderForm.genderDesc"
                    name="householderForm.genderDesc"
                    placeholder="请选择性别>"
                    @click="genderType=true"
                    :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                />
                <van-popup v-model="genderType" round position="bottom">
                    <van-picker
                         show-toolbar
                         value-key="itemValue"
                         :columns="genderTypeColumns"
                         @cancel="genderType=false"
                         @confirm="genderTypeConfirm"
                    />
                </van-popup>
                <van-field 
                    required
                    maxlength="11"
                    label="手机号" 
                    v-model="householderForm.mobileNo"
                    name="householderForm.mobileNo"
                    placeholder="请输入手机号..."
                    :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                />
                <van-field 
                    required
                    maxlength="100"
                    label="家庭住址" 
                    v-model="householderForm.familyAddress"
                    name="householderForm.familyAddress"
                    placeholder="请输入家庭住址..."
                    :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                />
            </div>
            <div style="display:flex;flex-direction:row;justify-content:center;text-align:center;margin-top:10px;align-item:center">
                <div class="meber">添加家庭成员</div>
                <span><van-icon name="add-o" @click="add"></van-icon></span>
            </div>
            <div>
                <van-popup v-model="relationType" round position="bottom">
                    <van-picker
                        show-toolbar
                        value-key="itemValue"
                        :columns="relationTypeColumns"
                        @cancel="relationType=false"
                        @confirm="relationTypeConfirm"
                    />
                </van-popup>
                <van-popup v-model="genderTypeList" round position="bottom">
                    <van-picker
                        show-toolbar
                        value-key="itemValue"
                        :columns="genderTypeColumns"
                        @cancel="genderType=false"
                        @confirm="genderTypeListConfirm"
                    />
                </van-popup>
                <div v-for="(item,index) in householderForm.tempVillagerDtoList" :key=(index)>
                    <div style="border:1px dashed #27bf69;padding:5px;border-radius:10px">
                        <van-field 
                       label="姓名"
                       required
                       maxlength="30"
                       v-model="item.name"
                       name="`item.name${index}`"
                       placeholder="请输入姓名..."
                       :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                      />
                      <van-field 
                       label="手机号"
                       maxlength="11"
                       v-model="item.mobileNo"
                       name="`item.mobileNo${index}`"
                       placeholder="手机号..."
                       :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                      />
                      <van-field 
                       readonly
                       required
                       clickable
                       label="退出时间"
                       v-model="item.signouttime"
                       name="`item.signouttime${index}`"
                       placeholder="退出时间>"
                       :rules="[{required:true,trigger:'onSubmit',message:'请选择退出时间'}]" 
                       @click="signouttimechange(index)"
                      />
                      <van-popup v-model="signouttimetype" round position="bottom">
                           <van-datetime-picker
                              v-model="signouttimeValue"
                              type="date"
                              title="选择年月日"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @cancel="signouttimetype=false"
                              @confirm="signouttimeConfirm"
                            />
                      </van-popup><van-field 
                       readonly
                       required
                       clickable
                       label="退出时间"
                       v-model="item.signouttime"
                       name="`item.signouttime${index}`"
                       placeholder="退出时间>"
                       :rules="[{required:true,trigger:'onSubmit',message:'请选择退出时间'}]" 
                       @click="signouttimechange(index)"
                      />
                      <van-popup v-model="signouttimetype" round position="bottom">
                           <van-datetime-picker
                              v-model="signouttimeValue"
                              type="date"
                              title="选择年月日"
                              :min-date="minDate"
                              :max-date="maxDate"
                              @cancel="signouttimetype=false"
                              @confirm="signouttimeConfirm"
                            />
                      </van-popup>
                      <van-field 
                       required
                       readonly
                       label="性别"
                       maxlength="11"
                       v-model="item.genderDesc"
                       name="`item.genderDesc${index}`"
                       placeholder="选择性别>"
                       @click="genderTypeListChange(index)"
                       :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                      />
                      <van-field 
                       required
                       readonly
                       label="与户主关系"
                       maxlength="11"
                       v-model="item.relationDesc"
                       name="`item.relationDesc${index}`"
                       placeholder="与户主关系>"
                       @click="relationTypeListChange(index)"
                       :rules="[{required:true,trigger:'onSubmit',message:''}]" 
                      />
                      <div>
                          <van-button
                              type="danger"
                              plain
                              size="small"
                              style="margin-left:8px;margin-right:8px"
                              @click.prevent.stop="deleteItem(index)"
                          >删除</van-button>
                          <van-button
                              type="primary"
                              plain
                              size="small"
                              style="margin-left:8px;margin-right:8px"
                              @click.prevent.stop="add"
                              v-show="index===householderForm.tempVillagerDtoList.length-1"
                          >增加</van-button>
                      </div>
                    </div>
                </div>
            </div>
            <div class="btn-top">
                  <van-button class="btn" type="primary">上报</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            genderTypeColumns:['男','女'], // 性别
            genderType:false,
            genderTypeList:false,
            genderTypeListValue:'',
            genderTypeListIndex:0,
            relationTypeIndex:0,
            relationTypeColumns:[‘父子’,'父女','母子','母女'], // 与户主关系
            relationType:false,
            signouttimeValue:new Date(),
            minDate:new Date(1900,0,1),
            maxDate:new Date(2099,12,31),
            signouttimetype:false,
            signouttimeindex:0,
            householderForm:{
                crdtNo:"123",
                familyAddress:"成都市",
                familycode:"123",
                gender:"女",
                genderDesc:"",
                householderName:'张三',
                mobileNo:'123',
                tempVillagerDtoList:[]
            }
        }
    },
    methods:{
        inputFamilyCodeChange(val){
            this.$set(this.householderForm,"familyCode",val.replace(/\s+/g,''))
        },
        genderTypeConfirm(val,index){
            console.log(val)
            this.$set(this.householderForm,"gender",val)
            this.$set(this.householderForm,"genderDesc",val)
            this.$set(this,"genderType",false)
        },
        genderTypeListChange(item){
            this.$set(this,"genderTypeListIndex",item)
            this.$set(this,"genderTypeList",true)
        },
        genderTypeListConfirm(val,index){
            this.$set(this.householderForm.tempVillagerDtoList[this.genderTypeListIndex],"gender",val)
            this.$set(this.householderForm.tempVillagerDtoList[this.genderTypeListIndex],"genderDesc",val)
            this.$set(this,"genderTypeList",false)
        },
        relationTypeListChange(item){
            this.$set(this,"relationTypeIndex",item)
            this.$set(this,"relationType",true)
        },
        relationTypeConfirm(val,index,event){
            this.$set(this.householderForm.tempVillagerDtoList[this.relationTypeIndex],"relation",val)
            this.$set(this.householderForm.tempVillagerDtoList[this.relationTypeIndex],"relationDesc",val)
            this.$set(this,"relationType",false)
        },
        signouttimechange(item){
             this.$set(this,'signouttimeindex',item)
             this.$set(this,'signouttimetype',true)
        },
        signouttimeConfirm(time){
             let year=time.getFullYear();
             let month=time.getMonth()+1;
             let date=time.getDate();
             let clock=year+'-';
             if(month<10){
                 clock+='0'
             }
             clock+=month+'-'
             if(date<10){
                 clock+='0'
             }
             clock+=date
            this.$set(this.householderForm.tempVillagerDtoList[this.signouttimeindex],"signouttime",clock)
            this.$set(this,"signouttimetype",false)
        },signouttimechange(item){
             this.$set(this,'signouttimeindex',item)
             this.$set(this,'signouttimetype',true)
        },
        signouttimeConfirm(time){
             let year=time.getFullYear();
             let month=time.getMonth()+1;
             let date=time.getDate();
             let clock=year+'-';
             if(month<10){
                 clock+='0'
             }
             clock+=month+'-'
             if(date<10){
                 clock+='0'
             }
             clock+=date
            this.$set(this.householderForm.tempVillagerDtoList[this.signouttimeindex],"signouttime",clock)
            this.$set(this,"signouttimetype",false)
        },
        add(){
            this.householderForm.tempVillagerDtoList.push({
                 crdtNo:"",
                 gender:"",
                 signouttime:"",  
                 genderDesc:"",
                 mobileNo:"",
                 name:"",
                 relation:"",
                 relationDesc:""
            })
        },
        deleteItem(val){
            this.householderForm.tempVillagerDtoList.splice(val,1)
        },
        uploadFailed(errorInfo){
            this.$refs.householderForm.scrollToField(errorInfo.errors[0].name)
        }

    }
}
</script>
<style>
   .meber{
    font-size:15px;
    color:#686868;
    width: 100px;
  }
  .btn-top{
      text-align: center;
      padding-bottom: 10px;
  }
  .btn{
      background-color: #27bf69;
      margin:15px 0px 10px 0px;
      width: 280px;
      border-radius: 20px;
      font-size: 16px;
  }
</style>