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()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
随机推荐
- POJ 2299 【树状数组 离散化】
题目链接:POJ 2299 Ultra-QuickSort Description In this problem, you have to analyze a particular sorting ...
- mybatis学习记录五——动态sql
8 动态sql 8.1 什么是动态sql mybatis核心 对sql语句进行灵活操作,通过表达式进行判断,对sql进行灵活拼接.组装. 8.2 需求 用户信息综合查询列表 ...
- 学大伟业 Day 2 培训总结
一.dp 动态规划的本质 是一种思想.通过对原问题划分成子问题,寻找子问题之间的联系,通过求解子问题得出原问题的解.与贪心不同的是,动归是深谋远虑,考虑全局最优解:而贪心则目光短浅,只考虑局部最优解. ...
- 通过sql语句查询出来的结果字段没有到对应实体类时的处理方法
通过sql语句查询出来的结果字段没有到对应实体类时的处理方法,对于Person类获取用户第一个名字和年龄两个字段,常见的有两种方式: 1.在创建一个与查询结果字段对应的类,然后通过构造函数实现: Qu ...
- bat 批处理变量
@echo off setlocal enabledelayedexpansion d: rem 更改d:\bat为当前目录 cd /d bat rem 变量使用 + echo %a% echo %C ...
- SpringBoot非官方教程 | 第十六篇:用restTemplate消费服务
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot11-restTemplate/ 本文出自方志朋的 ...
- 使用终端命令行将本地项目上传到Github并提交代码
第一步: 在Github上创建自己的repository 第二步:建立本地仓库cd到你的本地项目根目录下,执行git命令 1:$ cd 到你的项目目录下 2:$ git init 第三步:将本地项目工 ...
- iOS之Xcode自动管理证书、打包adhoc和testFlight测试安装
引言:Xcode8 之后引用Automatic manage signing .对于开发者而言,在证书上栽的坑肯定不少. 准备:1.开发者账号是必须的吧. 2. Xcode设置account (不给 ...
- mysql忘记密码重置
一.更改my.cnf配置文件 0.MySQL 版本查看 mysql --version 1.用命令编辑/etc/my.cnf配置文件,即:vim /etc/my.cnf 或者 vi /etc/my.c ...
- rest_framework --- APIView
一.什么是rest_framework 它是基于Django的,帮助我们快速开发符合RESTful规范的接口框架. 安装方式有很多种,可以通过pip,或者在pycharm中安装也可以 二.APIVie ...