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;
vue循环绑定v-model的更多相关文章
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- Vue双向绑定原理,教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- vue双向绑定原理源码解析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...
- Vue双向绑定实现原理demo
一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- Vue双向绑定的实现原理系列(四):补充指令解析器compile
补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...
- Vue双向绑定的实现原理系列(一):Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
随机推荐
- [19/03/18-星期一] 常用类_Math(数学)类&Rondom(随机数)类
一.Math(数学)类(单独一个Java.Math 包中) java.lang.Math提供了一系列静态方法用于科学计算;其方法的参数和返回值类型一般为double型.如果需要更加强大的数学运算能力, ...
- C# Response 下载
//TransmitFile实现下载 protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新 ...
- 【luogu P2984 [USACO10FEB]给巧克力Chocolate Giving】 题解
题目链接:https://www.luogu.org/problemnew/show/P2984 练习SPFA,把FJ当做起点,求出到所有牛的最短路,再把两个牛的相加. #include <cs ...
- 【luogu P2023 [AHOI2009]维护序列】 题解
题目链接:https://www.luogu.org/problemnew/show/P2023 把P3373改一改直接粘过来就A #include <iostream> #include ...
- HDU 1210 Eddy's 洗牌问题(找规律,数学)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1210 Eddy's 洗牌问题 Time Limit: 2000/1000 MS (Java/Other ...
- Unity3d在各个平台读取Sqlite3数据库
这也是我第一次在Unity3d中使用Sqlite来作为配置表文件,当然了,SQLite有优秀的读写性能. 如果这个项目用着稳定的话,我会一直使用下去. Android平台: 1,下载libsqlite ...
- Struts2 第一讲 -- Struts2开发前奏
我们在学习Struts之前,先来复习一下Servlet,众所周知Servlet是JavaWeb的三大组件.我们发送一个请求,这个请求交给Servlet处理,Servlet将处理的结果返还给浏览器.每个 ...
- sprinbboot 热部署 造成类加载器 不一致问题
这里只说devtools的方式,注意以下的热部署方式在IDEA是默认没有打开自动编译的,手动编译需要快捷键(Ctrl+Shift+F9), 自动编译的修改配置如下:(注意刷新不要太快,会有1-2秒延迟 ...
- Oracle db file parallel write 和 log file parallel write 等待事件
一. db file parallel write等待事件 引自如下blog: http://oradbpedia.com/wiki/Wait_Events_-_db_file_parallel_wr ...
- 小程序登录 -41003: aes 小程序加密数据解密失败问题
在微信小程的开发中,登录问题,一定要按照这样的顺序 1. 小程序请求login,拿到code 然后传给服务端: 2.服务端拿到code 到微信服务器拿到sessionKey :3.然后小程序调用ge ...