vue 循环列表双向绑定后改变数据造成赋值死循环的解决方案

最新推荐文章于 2026-08-10 14:41:12 发布

原创最新推荐文章于 2026-08-10 14:41:12 发布 · 3.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了在Vue中处理循环列表并进行双向绑定时遇到的数据更新死循环问题。通过分析需求，即产品配置渠道折扣价格，探讨了如何避免因直接操作对象导致的无限循环更新。文章提到了使用`Object.assign`来深拷贝对象，从而中断可能的循环引用，确保正确地更新和展示数据。

首先说需求

产品绑定多个渠道后, 每个渠道需要配置下级所有等级和分类组合的折扣价格

参考设计图稿

先不谈等级和分类的组合

我们先思考渠道数据的显示

在基于上面多选输出后, 需要对比数据库数据是否存在, 如果存在则填充输入框的值,如果不存在则填充空数据

于是有这样的代码

 let listItem=this.formData.channelList.find(v=>
                                v.classifyId===channelItem.classifyCation[j].id &&
                                v.rankId===channelItem.rank[k].id &&
                                v.channelId===channelId
                            );
                            if(!listItem){
                                listItem={
                                    channelId:channelId,
                                    classifyId:channelItem.classifyCation[j].id,
                                    rankId:channelItem.rank[k].id,
                                    priceList:{},
                                    discountConfig:[],
                                    priceTypeId:'',
                                    visible:true,

                                };

                                    this.formData.channelList.push(Object.assign({},listItem));
                            }else{
                                if(!listItem.priceList)listItem.priceList=jt.keyValue(listItem.discountConfig);
                            }

这里用到了 Object.assign 因为listItem 是 channelList.find得出的,

如果直接把listItem push到channelList就会马上触发channelList的set方法listItem的get方法

channelList有重新find出listItem 这里用Object.assign拷贝后阻断了这个循环