在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值

1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {}

2.在循环时通过下标在对象中创建新的值,我循环得时数组allGoodsClass是一个二维数组,此时通过下标的方式绑定,selectVal中得值就会为selectVal0 : "xxx",selectVal1 : "xxx"

<el-select v-for="(item, index) in allGoodsClass" :key="index" v-model="selectVal['selectVal'+ index]" class="goods-select" placeholder="请选择" size="mini" @change="changeGoodsClass(index)">
<el-option
v-for="(item1,index1) in item"
:key="index1"
:label="item1.commodity_classification_name"
:value="item1.id"
/>
</el-select>

3.在change事件触发后,通过下标即可以知道当前下拉框是循环中的哪一个,此时即可通过selectVal['selectVal' + index]取出对应的值

vue中循环时动态绑定值的更多相关文章

  1. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  2. C# bootstrap之表格动态绑定值

    这段时间研究了下bootstrap,打算从表格开始学习,实现动态绑定值,在网上找了挺多例子,但是很少有写全的,要不就太复杂,实现效果后总结一下,直接拷贝过去可以用. 第一步:先去官网上下载bootst ...

  3. Vue中循环的反人类设计

    今天学习Vue到循环那里,表示真是不能理解Vue的反人类设计 具体看代码吧! <!DOCTYPE html> <html> <head> <meta char ...

  4. 03.VUE学习之动态绑定值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. vue中v-bind:class动态添加class

    1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...

  6. 聊聊 Vue 中 title 的动态修改

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...

  7. foreach循环时动态往数组里添加数据

    今天在用TP做项目的时候遇到一个问题,foreach的时候需要动态往数组里添加数据,示例代码如下: $arr = array( array('id'=>'字符串1','name'=>'字符 ...

  8. MVC4 绑定下拉框方法,解决编辑时不绑定值

    方法一  Controller 部分代码: public ActionResult Modify(int id) { //3.1.1 检查id //3.1.2根据id查询数据 Models.Stude ...

  9. vue处理循环列表动态数据问题

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE ...

随机推荐

  1. cubietruck制作刷新lubuntu-kernel

    一:安装交叉编译工具链以及相应的工具(系统最好是ubutnu-64位-server) sudo apt-get install g++ sudo apt-get install libncurses5 ...

  2. android studio 程序真机执行中文显示乱码

    代码里中文显示正常,真机执行后中文显示乱码,解决的方法: build.gradle中加入一句 android { compileOptions.encoding = "GBK" }

  3. 分布式流媒体直播服务器系统 For Linux

    在之前的一篇<基于Darwin实现的分布式流媒体直播服务器系统>中,我们配置了在Win32下面的流媒体直播系统,今天我们分享一下在Linux下面EasyDSS分布式直播服务器系统的配置. ...

  4. JQuery ajax 把后台返回的List数据 遍历出来 赋值给div

    1.效果 2.前端代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  5. spawn类参数command详解

    我们主要来看spawn类它的构造方法参数主要有command,从字面上就是指spawn类的子程序用来执行的子程序,也就是系统所能够执行的相应的命令,对于command这个参数,我们是以字符串的方式给出 ...

  6. Tomcat启动过程中卡住了

    我在部署完项目后,debug启动Tomcat会在中间卡住不继续执行,测试发现在不部署项目的时候Tomcat是可以正常启动的. 控制台信息如下: 十月 25, 2017 10:40:44 上午 org. ...

  7. Visitor Pattern

    1.Visitor模式:将更新(变更)封装到一个类中(访问操作),并由待更改类提供一个接收接口,则可在不破坏类的前提下,为类提供增加新的新操作. 2.Visitor模式结构图 Visitor模式的关键 ...

  8. iOS 判定string是不是中文字符

    +(BOOL)IsChinese:(NSString *)str { ; i< [str length];i++) { int a = [str characterAtIndex:i]; if( ...

  9. UITextInputMode类的使用

    转载请注明:http://blog.sina.com.cn/s/blog_69081e060100v7ad.html   UITextInputMode大家看了是不是有些陌生呢?这个类是在4.2之后才 ...

  10. SAM初步

    SAM(Suffix Automaton),后缀自动机. SAM是种十分神奇的数据结构,我认为他的主要神奇之处,在于最大限度的利用了分类思想. SAM上有两种边,代表两种转移方式. 一种是树边,一种是 ...