精华内容
下载资源
问答
  • vue循环绑定v-model

    2019-10-04 17:05:58
    v-model ="arrForm[index][item.parameter_code]" :key ="index" > repayInput > 组织arrForm数据 _this.arrForm.length = 0 ; // debugger let obj = _this.formInfo[_this.socialType.value]....

    直接上代码

    结构:

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

     

    转载于:https://www.cnblogs.com/juexin/p/8797363.html

    展开全文
  • Vue 循环绑定value

    2021-03-01 10:28:31
    :value=“xxx”,就这样????了 <...input type="checkbox" v-on:change="check(12)" :id="index" :value="index" v-model="visitplan"> <label :for="index" class="doctor-li-fang" v-bi

    :value=“xxx”,就这样🆗了

    <template v-for="(item,index) in list">
    	<div class="doctor-li">
    		<input type="checkbox" v-on:change="check(12)" :id="index"  :value="index" v-model="visitplan">
    		<label :for="index"  class="doctor-li-fang" v-bind:class="{doctor_li_fang_active:isCheck==12}"></label><span class="doctor-li-txt">周一 (下午)</span>
    	</div>
    </template>
    
    展开全文
  • v-for 循环时直接使用 v-model 绑定报错 将 v-model 直接绑定到 v-for 迭代别名。这将无法修改 v-for 源数组,因为写入别名就像修改函数局部变量一样。考虑使用一个对象数组并在对象属性上使用 v-model。 原因:v-...
    v-for 循环时直接使用 v-model 绑定报错
    
    将 v-model 直接绑定到 v-for 迭代别名。这将无法修改 v-for 源数组,因为写入别名就像修改函数局部变量一样。考虑使用一个对象数组并在对象属性上使用 v-model。
    
    原因:v-model 不可以直接修改 v-for 循环迭代时别名上的数据,但是,可以通过 index 下标来引用所需的数据,可以达到相同目的。
    
    // 错误代码
    
    <div v-for="(item, index) in data" :key="index">
        // 直接绑定 v-for循环的item成员会报错
        <input v-model="item" />
    </div>
    
    
    
    // 正确代码
    <div v-for="(item, index) in data" :key="index">
        // 通过index, 绑定数组中对应项
        <input v-model="data[index]" />
    </div>
    
    展开全文
  • Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢这里介绍两种:一种是v-for中循环生成的输入框,一种是在...

    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢

    这里介绍两种:

    一种是v-for中循环生成的输入框,

    一种是在element-table中生成的输入框

    在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2..

    类似这样的,这样就可以通过绑定的值取到对应输入框的值了,

    在控制台打印的结果:

    还有一种场景是在表格中嵌套的input:

    这样的只用绑定表格的属性就好了,这样在打印出来的tableData中就可以拿到input的值

    补充知识:Vue.js 关于v-for动态绑定v-model,并实时获取input输入值和索引

    如何动态绑定V-model

    今天在尝试绑定的时候出来很多问题,而找了很多博客,描述的比较乱。

    于是记录一下我的解决方法

    动态绑定V-model

    data() {

    return {

    form: [

    {

    title: "用户名",

    placeholder: "输入用户名",

    modelName:'h'

    },

    {

    title: "密码",

    placeholder: "输入密码",

    modelName:'2'

    },

    {

    title: "确认密码",

    placeholder: "再次输入密码",

    modelName:'3'

    }]

    };

    }

    其实v-for动态绑定model和绑定其他元素没有大多差别,只要一点需要注意一下,正常动态绑定需要在属性前加:(v-on)这个语法糖,唯独绑定v-model时不用添加,在写的时候也是纠结了半天,至于原因我还没有查找,希望有评论大神指出。

    获得键盘实时输入的值和input输入框的索引

    输入值实时获取

    通过@input.native来监听输入框实时输入的值,注意:需要添加.native后缀。

    VUE官网有相应解释(链接)

    获得索引

    methods: {

    change: function(e,index) {

    console.log(e.target.value);//实时获取输入值

    console.log(index);//获取点击输入框的索引

    }

    }

    以上这篇Vue循环中多个input绑定指定v-model实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

    本文标题: Vue循环中多个input绑定指定v-model实例

    本文地址: http://www.cppcns.com/wangluo/javascript/340146.html

    展开全文
  • 主要介绍了Vue循环中多个input绑定指定v-model实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue循循环环中中多多个个input绑绑定定指指定定v-model实实例例 这篇文章主要介绍了Vue循环中多个input绑定指定v-model实例具有很好的参考价值希望对大家有所帮助 起跟随小编过来看看吧 Vue.js中提供了v-model可以...
  • > <li v-for="(item,index) in 3">...input type="text" v-model="num[index]"> > </li> >data: { num:[], }, > 方法: > clickMe(){ > console.log(this.num) > },
  • 今天我就遇到了一个动态绑定v-model的问题,百度也没找到解决方案 在这里说一下希望大家不要采坑 我也不絮叨了说那么一大堆抽象的东西。把实实在在的代码分享上来。 问题描述 可以看到我们这个 editData里的 ...
  • Vue循环中多个input绑定指定v-model

    万次阅读 2018-08-17 11:22:00
    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成的输入框,一种是在...
  • vue动态绑定v-model

    2020-05-25 16:28:53
    根据key绑定动态值 //数据 data: [{ index1: "123" }, { index2: "456" },{ index3: "789" }], //循环 <div v-for="(n,i) in data" :key="i"> <input type="text" v-model="data[i][`index${i+1}`]" /&...
  • Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢这里介绍两种:一种是v-for中循环生成的输入框,一种是在...
  • Vue循环渲染组件,v-model绑定的值影响同一类组件(单选、多选、文本域),如何解决
  • vue 如何在循环绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项;如下图这个样子; 代码如下: <ul ...
  • vue中v-for出来的input如何实现双向绑定 ...vue循环input组件,动态绑定v-model添加链接描述 <div span="24" v-for="(item,index) in iptList"> <FormItem :label="item.label"> <In...
  • <li v-for="(ls,index) in lunshu" :key="index"&...el-input v-else placeholder="请输入内容" v-model="lunshu[index].lushuScore" :value="lushuScore" > </el-input> </li> data() { ..
  • 子组件有一个列表要做输入验证 1 <template> 2 <...el-form :model="value" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"> 4 <el-form-item 5 ...
  • vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. 监听对象的变化 3. 监听对象中具体属性值的变化 4. vue 如何在循环中 "监听...
  • vue 中动态绑定 v-model

    千次阅读 2019-03-26 15:51:15
    二、当v-for循环中需要动态绑定v-model 以图示例: 注意:  避免在运行时向Vue实例或其根 $data 添加反应性属性在data选项中预先声明它。  注意v-modelvue中的一个指令,而不是标签属性,不要用v-bind:去动态...
  • VUE中el-form循环绑定

    千次阅读 2019-12-10 16:07:24
    在我们开发过程中,有时会遇到el-form循环绑定校验,并且后台返回的是动态表单list的形式,并且动态绑定是否必填 <el-form ref="addForm" :model="submitForm" //绑定的表单对象 label-width="125px" :rules=...
  • 别低头,皇冠会掉,别...v-model 双向绑定 v-for 循环 v-for (item,index in xx) v-for (item in xx) v-model > 双向数据绑定 单向数据绑定 数据 —> 视图 双向数据绑定 数据 < —> 视图 (v-model) ...
  • vue在v-for循环绑定v-model

    千次阅读 2018-03-16 16:50:00
    原始示例 <div v-for="item in items"> <...//我想他是goods_0,这样绑定他就直值输出到value上了 </div> 需要修改 v-model="'goods_'+$index" 改成 v-bind:value="'...
  • 在这里总结一下,在前台使用Vue,后台使用servlet的情况下,如何获取到整个问卷的问题以及选项并展示在页面中, 以及填报完成后将问卷填写结果存入数据库。前台在Vue中使用Ajax请求根据所选择的问卷的id获取问卷的...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 379
精华内容 151
关键字:

vue循环绑定model

vue 订阅