在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. Python使用Mysql过程中一些错误

    Python使用Mysql过程中一些错误 ssh登录远程服务器 ssh ubuntu@xxx.xxx.xx.xx 第一:ubuntu终端中登录Mysql mysql -uroot -p 然后输入密码即 ...

  2. FreeCMS怎么动态訪问模板?

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/31166.html​ 项目地址:http://www.freeteam.cn/ FreeCM ...

  3. Spark SQL includes a cost-based optimizer, columnar storage and code generation to make queries fast.

    https://spark.apache.org/sql/ Performance & Scalability Spark SQL includes a cost-based optimize ...

  4. linux SVN 安装配置

    svn服务器有2种运行方式 1.独立服务器 (例如:svn://xxx.com/xxx):2.借助apache.(例如:http://svn.xxx.com/xxx):为了不依赖apache,选择第一 ...

  5. [Usaco2005 Dec]Cleaning Shifts 清理牛棚

    题目描述 Farmer John's cows, pampered since birth, have reached new heights of fastidiousness. They now ...

  6. [HTML & CSS] HTML和CSS基础知识

    最近将博客简单地修饰了下,需要用到HTML和CSS代码,花了一天时间学习了一下这两方面的知识.虽然内容很简单,但是足够用来修改自己的博客了. 1. HTML 1.1. HTML介绍 HTML与CSS的 ...

  7. 简述arp协议的工作原理

    在每台安装有TCP/IP协议的电脑里都有一个ARP缓存表,表里的IP地址与MAC地址是一一对应的,如: 我们以主机A(192.168.1.5)向主机B(192.168.1.1)发送数据为例.当发送数据 ...

  8. WSDL文档深入分析

    借助jdk的wsimort.exe工具生成客户端代码 格式:wsimport -keep url   //url为wsdl文件的路径 直接生成客户端代码会抛异常, 无法生成客户端代码, 解决办法: 将 ...

  9. sdut oj 1163 C语言实验——排列 (当初不会递归生成排列,这个题目现在才补上 刘汝佳给出了写法 *【模板】 当然有生成全排列的函数存在 )

    C语言实验——排列 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 有4个互不相同的数字,请按序输出由其中三个不重复数字组成的排列 ...

  10. 一个selenium笔试题——去哪网首页获取符合要求的url并保存

    今天在群里看到这样一个笔试题:请使用任何熟悉的面向对象编程语言,编写代码,获取http://www.qyer.com页面中,所有</a>标签"href"属性值包含英文单 ...