直接上代码

结构:

<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;

vue循环绑定v-model的更多相关文章

  1. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  2. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  3. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  4. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  5. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  6. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  7. Vue双向绑定实现原理demo

    一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  8. Vue双向绑定的实现原理系列(四):补充指令解析器compile

    补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...

  9. Vue双向绑定的实现原理系列(一):Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

随机推荐

  1. 【题解】UVA11584 Partitioning by Palindromes

    UVA11584 https://www.luogu.org/problemnew/show/UVA11584 暑假开始刷lrj紫/蓝书DP题 这几天做的一道 思路 预处理出所有的回文串是否存在 前提 ...

  2. Entity Framework 四

    实体框架支持三种类型的查询:1)LINQ to Entities,2)Entity SQL,3)Native SQL LINQ方法语法: LINQ查询语法: 实体SQL: 这种可以简单的了解,不必深入 ...

  3. [Oracle]分区索引

    上一节学习了分区表,接着学习分区索引. (一)什么时候对索引进行分区 · 为了避免移动数据时重建整个索引,可对索引分区,在重建索引时,只需重建与数据分区相关的索引: · 在对分区表进行维护时,为了避免 ...

  4. DOM操作指令整理

    DOM操作指令整理: (1) 创建新节点: createDocumentFragment() 创建一个DOM片段 creatElement() 创建一个具体的元素 creatTextNode() 创建 ...

  5. Javascript中的this对象

    对于this的使用,我们最常遇到的主要有,在全局函数中,在对象方法中,call和apply时,闭包中,箭头函数中以及class中: 我们知道this对象是在运行时基于函数的执行环境绑定的,在调用函数之 ...

  6. 『ACM C++』HDU杭电OJ | 1415 - Jugs (灌水定理引申)

    今天总算开学了,当了班长就是麻烦,明明自己没买书却要带着一波人去领书,那能怎么办呢,只能说我善人心肠哈哈哈,不过我脑子里突然浮起一个念头,大二还要不要继续当这个班委呢,既然已经体验过就可以适当放下了吧 ...

  7. 【学时总结】◆学时·IX◆ 整体二分

    ◆学时·IX◆ 整体二分 至于我怎么了解到这个算法的……只是因为发现一道题,明显的二分查找,但是时间会爆炸,被逼无奈搜题解……然后就发现了一些东西QwQ ◇ 算法概述 整体二分大概是把BFS与二分查找 ...

  8. ABAP术语-Lock Object

    Lock Object 原文:http://www.cnblogs.com/qiangsheng/archive/2008/02/29/1085742.html Object type in the ...

  9. Python常用的数据类型

    Python常用的数据类型有很多,今天暂时介绍这三种,int(整数类型).str(字符串).bool(布尔类型)一.int(整数类型)1.不带小数的,integer 的缩写,常用于数据的计算或者大小的 ...

  10. Flask模拟实现CSRF攻击

    CSRF CSRF全拼为Cross Site Request Forgery,译为跨站请求伪造. CSRF指攻击者盗用了你的身份,以你的名义发送恶意请求. 包括:以你名义发送邮件,发消息,盗取你的账号 ...