在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. ThinkPHP5 安装自定义模块

    安装官方给的demo,在build.php文件中 <?php // +-------------------------------------------------------------- ...

  2. 一个经典的比喻( 关于TCP连接API )

    前言 编程是对现实世界的模拟,网络通信自然也是对现实世界通信的模拟.可以将网络通信中使用的各种API和对现实世界中的各种通信设备进行通讯的操作进行对比以加深理解. 对比 socket() 函数 vs ...

  3. iOS开发者必备:四款后端服务工具

    本文转载至 http://mobile.51cto.com/iphone-411917.htm 对于开发者来说,连接后端数据或许是一件特别痛苦的事情.但后端服务却能够帮助开发人员以更快的速度构建移动应 ...

  4. Package md5 implements the MD5 hash algorithm as defined in RFC 1321 base64

    https://golang.google.cn/pkg/crypto/md5/ Go by Example 中文:Base64编码 https://books.studygolang.com/gob ...

  5. mac 中安装redis 以及 安装php-redis扩展过程详细记录

    1. 通过homebrew 安装 redis sodu brew install redis 2. 安装后执行开启redis,采用默认配置, 默认配置只有本地(127.0.0.1)可以访问.需要远程访 ...

  6. TMS320C6478+MCP2515

    调一个驱动,将看过的资料记录下来. 这个驱动写得比较直观:http://www.51hei.com/bbs/dpj-114085-1.html

  7. ffmpeg xcode 中的使用

    最近比较闲,苦于ios设备上没有直接播放torrent 文件的软件,开始折腾了.找了不少资料有了思路.但是其中用到了ffmpeg 这个东西. ffmpeg 是通用的一个视频解决框架,用C语言编写,通用 ...

  8. “cannot be resolved to a type” 错误解决方法

    (1)jdk不匹配(或不存在) 项目指定的jdk为“jdk1.6.0_18”,而当前eclipse使用的是“jdk1.6.0_22”.需要在BuildPath | Libraries,中做简单调整. ...

  9. HTML5 Canvas 时钟

    1. [图片] QQ截图20120712130049.png ​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" &g ...

  10. 机器学习(十六)— LDA和PCA降维

    一.LDA算法 基本思想:LDA是一种监督学习的降维技术,也就是说它的数据集的每个样本是有类别输出的.这点和PCA不同.PCA是不考虑样本类别输出的无监督降维技术. 我们要将数据在低维度上进行投影,投 ...