vue点击新增添加div框

发布网友发布时间：2022-09-03 17:55

共1个回答

热心网友时间：2024-12-05 02:07

1.dom结构

<div class="liveInDetailList">

<div class="liveInDetail" v-for="(item,index) inPersonNamelist.guestList" :key="index">

<div class="infoDetail">

<span class="left">住客姓名</span>

<input type="text" placeholder="请输入姓名" class="searchRoomInp" autofocus="autofocus" v-model="item.name" ref="inputName" v-focus>

</div>

<div class="infoDetail">

<span class="left" >手机号</span>

<input type="text" placeholder="请输入手机号" class="searchRoomInp" v-model="item.mobilePhone" >

</div>

<div class="infoDetail">

<span class="left">身份证号</span>

<input type="text" placeholder="请输入身份证号" class="searchRoomInp" v-model="item.idCardNo">

</div>

<div class="handle" v-if="isShowDelete">

</div>

<div class="handle" v-else>

<i slot='rightIcon' class="iconfont icon-icon-shanchu deleterightIcon" @click.stop="delRoomCard(index)"></i>

</div>

</div>

</div>

2在data中定义

PersonNamelist:{

checkInRoomId:'',

guestList:[{id:"",name:"",mobilePhone:"",idCardNo:""}]

},

3.点击新增

1.定义一个obj

let obj={

id:"",

name:"",

mobilePhone:"",

idCardNo:""

}

2.点击一下将obj添加进数组PersonNamelist

4.该项目会从后台传来一个新增最多的人数所以需要判断下PersonNamelist中的guestList的长度

addPerson(){

let obj={

id:"",

name:"",

mobilePhone:"",

idCardNo:""

}

if(this.PersonNamelist.guestList.length<(后台数据))

this.PersonNamelist.guestList.push(obj)

}

else{

Toast({

message:'已超出该房间可住最大人数',

position:'bottom',

ration:1000,

className:'panan'

});

}

}