vue 相同组件间数据同步时,第一次赋值未触发渲染,点击按钮第二次赋值,可以触发渲染,怎么解?
数据结构如下:
{[
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()
页面效果:
根节点:
同步更新数据方法:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论