解决v-for中遍历多个el-select时,下拉选择框同步选择问题

当v-for遍历多个el-select时,由于v-model绑定的值为同一个,导致下拉选择时多个下拉选择框同步选择问题

如图是v-model绑定的同一个seatValue数据:

解决办法:

一、为el-select绑定不同的v-mode值,将v-for传递的index值绑定在v-model的参数上( v-model="seatValue[index]" )

二、通过axios获取数据时,创建一个新的seatValue空数组,通过map遍历获取到的fourthContentArr里的每一个对象数据,并每循环一个对象时,就往seatValue空数组里增添一个空字符串

三、在点击发送按钮发送当前行的数据时,通过seatValue[index].map遍历当前seatValue对应的当前行的数据,使得当前点击的下拉选择框的seatValue,为独立选择,解决出现的多个下拉选择框同步选择问题,并达到向当前选择的席位发送当前点击的列表的数据。

四、以上方法实现了v-for遍历的每一个el-select的v-model绑定的seatValue为各自独有的

原文地址:https://www.cnblogs.com/nayek/p/12393131.html

时间: 2024-10-09 10:15:20

解决v-for中遍历多个el-select时,下拉选择框同步选择问题的相关文章

解决:信息中插入avi格式的视频时,提示“unsupported video format”

[测试步骤]:新建信息,添加AVI格式的视频 [测试结果]:添加时弹出提示"unsupported video format" 该问题主要提现在手机彩信视频附件不支持该AVI格式的视频,因此我们通过操作流程对代码进行追踪,查找"unsupported video format"产生的位置. 我们从添加附件界面ComposeMessageActivity类的onActivityResult()方法开始. -->onActivityResult()调用代码如下:

解决在IE中返回JSON格式的数据时提示下载的问题

如题,以ASP.NET MVC为例,解决办法如下: 控制器中: public JsonResult Test() { return Json(json, "text/html"); } 视图中: $.post("/controller/action/", function (data) { data = JSON.parse(data); }); 解决在IE中返回JSON格式的数据时提示下载的问题

sencha 2.3中自己定义PullRefreshFn给PullRefresh加入下拉刷新事件

Sencha removed the refreshFn from the pullrefresh plugin in ST 2.2. Here is an user extension with gives the old functionality back to you. /** * This user extension gives st 2.3.0 Pullrefresh the RefreshFn back * based on sencha touch 2.3.0 * * @cla

Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

Qt qml中listview 列表视图控件(下拉刷新.上拉分页.滚动轴) 来源 https://www.cnblogs.com/surfsky/p/4352898.html 设置ListView涉及到将contentsY,即视图的可见部分的顶部,设置y为委托的值.另一个更改是interactive将视图设置为false.这样可以防止视图移动.用户不能再滚动列表或更改当前Item. contentY为列表上拉后列表左上角点距显示框左上解点的高度listView1.height为可显示部分的高度,

jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件

/** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author bear.LEE <571115139#qq.com> * @@since 2018-08-21 **/ ; (function ($) { $.fn.extend({ addClearBtn: function (options, $o) { var deft = { symbolClass: "f

JS 实现 select中指定option选中触发事件(下拉框)

转自:http://www.cnblogs.com/moli-/p/6406170.html 在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. 想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件 又在select中添加onclick 这下可好了,没选option呢就触发了 当我们触发select的双击事件时,用ondb

ActionBar 中导航菜单、内容提供中和下拉菜单

一.Action View Action视图是一个在ActionBar上作为Action Button 的替代品.要声明一个视图,需要使用 actionLayout 和 actionViewClass 两个属性中的任意一个来分别定义视图的布局资源和布局类. 下面介绍如何定义 Searview 组件: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://sch

laravel 在三级分类下拉选框中默认值

这是一个商品表,记录了商品的分类,分三类,顶级分类.一级分类.二级分类 在编辑修改商品的信息的视图 先得给控制器传递商品的 id ,根据 id 获取商品全部信息,以及获取所有分类信息 然后进行家谱树查找,参数为分类信息-数组,商品的分类id-整型 这样子得到了,子对父的二维数组, 将此二维数组,进行无限极分类,得到三位数组 第一维就是顶级分类,第二维是一级分类,第三维是二级分类 把得到的这个数组传给视图,循环遍历,输出值给option即可 家谱树代码: /** * 家谱树,通过子id找父id *

在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

1. 在template加入如下标签 <el-form-item label="文章库" :label-width="formLabelWidth" > <el-autocomplete v-model="addTopic.name" :fetch-suggestions="querySearchAsync" placeholder="请输入文章标题" @select="hand