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

首先说需求

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

参考设计图稿

先不谈等级和分类的组合

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

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

于是有这样的代码

 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拷贝后阻断了这个循环