vue map循环数组,向数组push值,值出现重复添加的问题(已解决)
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})
}
},
更多推荐
已为社区贡献36条内容
所有评论(0)