vue 相同组件间数据同步时,第一次赋值未触发渲染,点击按钮第二次赋值,可以触发渲染,怎么解?

发布于 2022-09-13 01:18:33 字数 8965 浏览 12 评论 0

数据结构如下:

{[
    data1 : {
        attribute : [{ a: 1,b:2},{c:3,d:4}],
    },
    data2 : {
        attribute : [],
    },
    data3 : {
        attribute : [],
    },
]}

data1,data2,data3 使用同一个组件渲染,默认显示data1的数据;此时我再页面点击复制功能,需要将data1的数据分别复制到data2,data3;问题是第一次赋值,不渲染;再点击一次才能渲染,大佬求解?

顺便说下:我用Vue.set()赋值,也有在最后使用this.$forceUpdate()

页面效果:
image.png

根节点:
image.png

同步更新数据方法:

 syncPropertyItem:function(property, items = [], index = []) {
                //property 模块名   items具体字段集合
                //sku模块 所有信息 (模块分别是基本信息,价格库存信息 图片信息 描述信息)
                let _that         = this;
                parent.layer.confirm('确定是否要同步该模块信息', function (idx) {
                    parent.layer.close(idx);
                    let site          = _that.currentSite;
                    let currentTabKey = _that.currentTabKey;
                    if (_that.checkedSku.length ==0) {
                        parent.layer.msg('请选选中需要同步的SKU');
                        return  false;
                    }

                    //深拷贝方式去掉双向绑定关联
                    let infoData  = JSON.parse(JSON.stringify(_that.siteSkuData[currentTabKey][property]));console.log(infoData);
                    let fields    = ['part_number','item_type','variation_theme', 'color_map','color_name','size_map','size_name'];
                    let loading   = parent.layer.load(1);console.log(property, items, index);
                    for (let i in _that.checkedSku) {
                        let tabKey = site+'-'+_that.checkedSku[i];
                        if (tabKey == currentTabKey) continue;
                        let skuInfo = JSON.parse(JSON.stringify(infoData));
                        if(property == 'baseInfo') {
                            skuInfo['goods_sku']  = _that.checkedSku[i];
                            skuInfo['product_id'] = _that.siteSkuData[tabKey][property]['product_id'];
                            skuInfo['seller_sku'] = _that.siteSkuData[tabKey][property]['seller_sku'];
                            skuInfo['product_id_type'] = _that.siteSkuData[tabKey][property]['product_id_type'];
                        }
                        if (property == 'itemInfo' && items.length == 0) {
                            skuInfo['msrp_price'] = _that.siteSkuData[tabKey][property]['msrp_price'];
                            skuInfo['price'] = _that.siteSkuData[tabKey][property]['price'];
                            skuInfo['inventory'] = _that.siteSkuData[tabKey][property]['inventory'];
                            skuInfo['is_discount'] = _that.siteSkuData[tabKey][property]['is_discount'];
                            skuInfo['discount_price'] = _that.siteSkuData[tabKey][property]['discount_price'];
                            skuInfo['discount_start_time'] = _that.siteSkuData[tabKey][property]['discount_start_time'];
                            skuInfo['discount_end_time'] = _that.siteSkuData[tabKey][property]['discount_end_time'];
                        }
                        if (items.length >= 1) {
                            for (let g in items) {
                                if (index.length > 0 && Array.isArray(skuInfo[items[g]])) {
                                    //这里主要处理图片单张同步时定位
                                    for (let h in index) {
                                        let k = index[h] - 1;
                                        if (_that.siteSkuData[tabKey][property][items[g]][k] == undefined) {
                                            _that.siteSkuData[tabKey][property][items[g]].push(skuInfo[items[g]][k]);
                                        } else {
                                            _that.siteSkuData[tabKey][property][items[g]][k] = skuInfo[items[g]][k];
                                        }

                                        _that.siteSkuData[tabKey][property]['num'] = _that.siteSkuData[tabKey][property][items[g]].length;
                                        Vue.nextTick(function () {
                                            let idx = _that.siteSkuArr.indexOf(_that.checkedSku[i]);
                                            _that.$refs['imageList'][idx].image_init();
                                        })
                                    }
                                } else {
                                    _that.siteSkuData[tabKey][property][items[g]] = skuInfo[items[g]];
                                    Vue.nextTick(function () {
                                        let idx = _that.siteSkuArr.indexOf(_that.checkedSku[i]);
                                        _that.$refs['imageList'][idx].image_init();
                                    })
                                }
                            }
                        } else {
                            if (property == 'baseInfo') {console.log(_that);
                                $.each(skuInfo, function (ke, v) {
                                    if (ke == 'attribute') {console.log(ke, v);
                                        _that.$refs['basic'][i]['_props']['basicinfodata']['attribute'] = v;
                                        //_that.$set(_that.siteSkuData[tabKey][property], 'attribute', v);
                                        //if (!_that.siteSkuData[tabKey][property].hasOwnProperty('attribute')) _that.siteSkuData[tabKey][property]['attribute'] = {};
                                        $.each(v, function (key, tt) {
                                            $.each(tt, function (ks, val) {
                                                if (fields.indexOf(ks) > -1) {
                                                    if (ks == 'part_number') {
                                                        //tt[ks]['value'] = _that.siteSkuData[tabKey][property]['seller_sku'];
                                                        _that.$set(_that.siteSkuData[tabKey][property][ke][key][ks], 'value',  _that.siteSkuData[tabKey][property]['seller_sku']);
                                                    } else if (ks == 'item_type') {
                                                        //tt[ks]['value'] = _that.siteSkuData[tabKey][property]['category_attribute'];
                                                        _that.$set(_that.siteSkuData[tabKey][property][ke][key][ks], 'value',  _that.siteSkuData[tabKey][property]['category_attribute']);
                                                    } else {
                                                        _that.$refs['basic'][i]['_props']['basicinfodata']['attribute'][key][ks]['value'] = '';
                                                        _that.$set(_that.siteSkuData[tabKey][property][ke][key][ks], 'value', '');
                                                        //tt[ks]['value'] = '';
                                                    }
                                                } else {
                                                    _that.$refs['basic'][i]['_props']['basicinfodata']['attribute'][key][ks]['value'] = val['value'];
                                                    console.log(val.value);
                                                    console.log(_that.$refs['basic'][i]['_props']['basicinfodata']['attribute'][key][ks]);
                                                }
                                            });
                                            //v[key] == tt;
                                        });
                                        console.log(_that.siteSkuData[tabKey][property]);

                                        _that.$forceUpdate();
                                    } else {
                                        Vue.set(_that.siteSkuData[tabKey][property], ke, v);
                                    }
                                });

                            } else {
                                Vue.set(_that.siteSkuData[tabKey], property, skuInfo);
                            }
                            if (property == 'imageList') {
                                let idx = _that.siteSkuArr.indexOf(_that.checkedSku[i]);
                                Vue.nextTick(function () {
                                    _that.$refs['imageList'][idx].image_init();
                                })
                            }
                        }
                    }

                    // if (property == 'baseInfo') {
                    //     _that.$refs['basic'][i]['isAttr'] = false;
                    //     $('.selectpicker').selectpicker('refresh');
                    // }
                    parent.layer.msg('同步完成');
                    parent.layer.close(loading);
                });
            },

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文