vue循环绑定v-model
直接上代码
结构:
<repayInput v-if="formData" v-for="(item, index) in formData" :isPwd="item.parameter_code==='password'" :text="item.parameter_name.replace('社保网站','')" :textAlign="'right'" :errText="arrForm[index][`arr${item.parameter_code}`]" @changeErrText="_changeErrText2($event,index,'arr'+item.parameter_code)" :type="item.parameter_code" :maxlength="item.parameter_code==='name'?'15':'50'" :placeholder="item.parameter_message" v-model="arrForm[index][item.parameter_code]" :key="index"> </repayInput>
组织arrForm数据
_this.arrForm.length = 0; // debugger let obj = _this.formInfo[_this.socialType.value].tabs[selectedVal[selectedVal.length-1]].field; for(var j=0; j<obj.length; j++) { var strObj = `{"${obj[j].parameter_code}":"","arr${obj[j].parameter_code}":"","type":"${obj[j].parameter_code}","name${obj[j].parameter_code}":"${obj[j].parameter_name}"}`; // Vue.set(_this.arrForm, obj[j].parameter_code, ''); // Vue.set(_this.arrForm, `arr${obj[j].parameter_code}`,''); _this.arrForm.push(JSON.parse(strObj)) }
表单验证:
//验证动态表单 this.arrForm let _this = this; for(var i=0; i< _this.arrForm.length; i++) { var cur = _this.arrForm[i]; if( !rValidate.isEmpty(cur[cur.type],() => { cur['arr'+cur.type] = cur['name'+cur.type] + '不能为空'; }) ){ dyPro = false; } if( cur.type === 'id_card_num' ){ if( cur[cur.type]!==_this.query.cardNo ) {//验证是否与借款人是同一人 cur['arr'+cur.type] = '请输入身份认证时身份证账号'; dyPro = false; } } if( cur.type === 'cell_phone_num' ){ if( !rValidate.mobile(cur[cur.type],() => { cur['arr'+cur.type] = '手机号码格式错误'; }) ) { dyPro = false; } } }
组织需要提交的数据:
//组织表单参数 applyInfo _this.arrForm let applyInfo = {}; for(var i=0; i< _this.arrForm.length; i++) { var cur = _this.arrForm[i]; applyInfo[cur.type] = cur[cur.type]; } query_.applyInfo = applyInfo;