动态向数组中添加对象时，对象重复问题

最新推荐文章于 2022-12-26 16:08:35 发布

Spongebob_nut

最新推荐文章于 2022-12-26 16:08:35 发布

阅读量1.4k

点赞数

分类专栏：笔记项目 Vue 文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/weixin_45832482/article/details/122142826

版权

笔记同时被 3 个专栏收录

58 篇文章 7 订阅

订阅专栏

项目

21 篇文章 0 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

动态向数组中添加对象时，对象重复问题

在这里插入图片描述
修改前代码：

          this.nodesList = [{ id: '', name: '', moneyNum: '', showInput: false }];
                const itemIdMonet = this.acceptValue.rules.map(itemIdMon => {
                    const obj = {
                        id: itemIdMon.nodeId,
                        bonus: itemIdMon.bonus
                    };
                    return obj;
                });
                console.log(itemIdMonet);
                this.processNodesName.forEach((item, index) => {
                    for (let m = 0; m < itemIdMonet.length; m++) {
                        const vals = {
                            id: this.nodesArray[index],
                            name: item,
                            moneyNum: this.nodesArray[index] === itemIdMonet[m].id ? itemIdMonet[m].bonus : '',
                            showInput: this.nodesArray[index] === itemIdMonet[m].id
                        };
                        this.$nextTick(() => {
                            this.nodesList.push(vals);
                            if (this.nodesArray[index] === itemIdMonet[m].id) {
                                this.$nextTick(() => {
                                    this.$refs.nodesList.toggleRowSelection(this.nodesList[index], true); // 添加选中
                                });
                            }
                        });
                    }
                });
                console.log(this.nodesList, 'this.nodesList');

向数组中push对象的时候，如果在一个双重for循环里的话，即使在添加的时候加过判断，数组中的对象依旧会有重复，出现的情况是：
符合条件的成功添加，不符合条件的也添加进去了
解决后：

                this.nodesList = [{ id: '', name: '', moneyNum: '', showInput: false }];
                const itemIdMonet = this.acceptValue.rules.map(itemIdMon => {
                    const obj = {
                        id: itemIdMon.nodeId,
                        bonus: itemIdMon.bonus
                    };
                    return obj;
                });
                console.log(this.processNodesName, this.nodesList, itemIdMonet, 'nodesListnodesList');
                this.processNodesName.forEach((item, index) => {
                    let flag = true;
                    for (let m = 0; m < itemIdMonet.length; m++) {
                        // 重组数据，表格中添加对象
                        if (this.nodesArray[index] === itemIdMonet[m].id) {
                            const tmpData = {
                                id: this.nodesArray[index],
                                name: item,
                                moneyNum: itemIdMonet[m].bonus,
                                showInput: true
                            };
                            this.nodesList.push(tmpData);
                            setTimeout(() => {
                                this.$refs.nodesList.toggleRowSelection(tmpData);
                            }, 0);

                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.nodesList.push({
                            id: this.nodesArray[index],
                            name: item,
                            moneyNum: '',
                            showInput: false
                        });
                    }
                });
                console.log(this.nodesList, 'nodesListnodesList');