vue map循环数组，向数组push值，值出现重复添加的问题（已解决）

需求：选择下拉框中的值，点击添加按钮，将选中的值push到表格数组中，进行页面渲染，选择的重复值要去除掉。
页面效果：

再次选择 7 & 8 要提示已经存在

出现问题：第一次第二次添加都没有问题，第三次之后，添加数据都会出现重复添加的现象

修改之前代码：
逻辑：首先判断表格数组是否有值，没有值正常进行push，有值进行重复值筛选，如果已经存在不再push，反之，正常赋值

  // 添加handleAdd(){let that=this  if(that.reelNameList.length>0){that.reelNameList.map(item=>{if(item.size==that.sizeValue&&item.thick==that.thickValue){exist = true;that.$message({message:'已经存在了~',type: 'error'});}else{that.reelNameList.push({size:that.sizeValue,thick:that.thickValue})}})}else{console.log('数组小于0')that.reelNameList.push({size:that.sizeValue,thick:that.thickValue})}       },

导致问题出现的原因：是因为在map循环里进行了else判断，导致会一直循环添加

修改后代码：
增加一个值进行判断

 // 添加handleAdd(){let that=this  if(that.reelNameList.length>0){let exist = false;//判断是否存在that.reelNameList.map(item=>{if(item.size==that.sizeValue&&item.thick==that.thickValue){exist = true;that.$message({message:'已经存在了~',type: 'error'});}})if(!exist){that.reelNameList.push({size:this.sizeValue,thick:this.thickValue})}}else{console.log('数组小于0')that.reelNameList.push({size:that.sizeValue,thick:that.thickValue})}       },

完整代码

 <div class="both-btn"><el-select v-model="sizeValue" clearable placeholder="请选择尺寸" @change="toQuerySize"><el-option v-for="item in sizeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select><el-select v-model="thickValue" clearable placeholder="请选择类型" @change="toQuery"><el-option v-for="item in thickOptions" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select><div><el-button size="small" round style="background-color:#00558C" @click="handleAdd()">添加</el-button></div></div>

data中定义

 sizeOptions:[],//尺寸下拉框sizeValue:'',thickValue:'',thickOptions:[],//厚度下拉框reelNameList: [],

   // 添加handleAdd(){let that=this  if(that.reelNameList.length>0){let exist = false;//判断是否存在that.reelNameList.map(item=>{if(item.size==that.sizeValue&&item.thick==that.thickValue){exist = true;that.$message({message:'已经存在了~',type: 'error'});}})if(!exist){that.reelNameList.push({size:this.sizeValue,thick:this.thickValue})}}else{console.log('数组小于0')that.reelNameList.push({size:that.sizeValue,thick:that.thickValue})}       },

vue map循环数组，向数组push值，值出现重复添加的问题（已解决）相关推荐

Vue如何循环提取对象数组中的值
数据如下,提取name和callcount 第一种: getQueryCallStatistics("sesp1", this.provinceId).then((res) =&g ...
GEE中取数据遇到值为null无法添加到list的解决方法
1. 问题描述在GEE上处理数据时,遇到了值为null的情况,这种情况下无法将得到null值添加到list,从而造成程序错误.因此,解决问题的思路应该是将null的值进行替换,替换为一个数值. 2. ...
python列表添加重复值_python 列表重复添加数据库
<Python 3程序开发指南(第2版•修订版)>--1.4 总结本节书摘来自异步社区<Python 3程序开发指南(第2版•修订版)>一书中的第1章,第1.4节,作者[英] ...
vue项目使用jwt token验证登录报错token无效验证失败【已解决】
检查了所有代码都没有问题,在所有需要token的地方都能拿到正确的token,但是在verify时仍然走的err,打印出的错误为 invalid token 最后在外网查到有人在获取token时使用了 ...
js声明数组 js数组如何获取真实对象 js数组处理null值情况 js数组通过下标赋值和push赋值的区别 loopback4的基础使用
目录问题来源 js数组数组通过下标赋值数组通过push赋值总结 loopback4 安装创建项目项目启动访问项目创建HelloController 运行访问HelloControlle ...
vue中检测对象和数组值变化的问题
今天工作中遇到改变vue data中某个对象的值,却无法触发视图更新的问题.看了看官方文档,怎么解决的呢? 1.检测对象的变化受现代 JavaScript 的限制(以及废弃 Object.obse ...
【杂记】（富文本框回填值、ajax数据回填按钮年级学科、去除数组中数组外包的引号、多重循环的写法、微测评获奖页面的内容循环拼接写法、textarea禁止拖动、html基本、透明度、页面内出现滚动条）
1. 富文本框回填值 for(var i = 0;i<res.data.choiceoptinfo.length;i++){ueArr[i].ready(function(){//选项ueArr ...
php volist获取数组长度,Thinkphp volist多重循环原样输出数组key值
下面由thinkphp框架开发栏目给大家介绍Thinkphp volist多重循环原样输出数组key值的使用总结,希望对需要的朋友有所帮助! 最近因为项目的缘故,要使用到volist.在这个过程中,遇 ...
for循环遍历数组并获取到数据值进行判断
/*vm.listData为数组*/ var obj = vm.listData;//for循环遍历数组获取数组中的手机号并判断手机号的长度是否为规定的长度for (var i = 0; ...

vue map循环数组，向数组push值，值出现重复添加的问题（已解决）

vue map循环数组，向数组push值，值出现重复添加的问题（已解决）相关推荐

最新文章

热门文章