vue在用的过程中,列表数据用数组从后台获取,当新增数据的时候用数组push操作,列表会刷新,但是当在修改页面,默认先从后台load数据到数组,然后再进行push或者splice进行添加删除操作的时候,发现数据已经变了但是界面列表却没有显示。这时候可以用一个中间数组变量来过渡一下,并且加上强制刷新,可以解决这个问题
vm = new Vue({
el: '#app',
data: {
ShipmentInfo: {
F_Id: '',
F_Company_Id: '',
F_Company_Name: '',
F_Company_Address: '',
F_Company_Tel: '',
F_Company_Phone: '',
__RequestVerificationToken: "",
F_OrderSales_Id: '',
F_Shipment_Id: '',
F_Status: '',
F_DeliveryTime: '',
ShipmentDetails: [],
ShipmentDetailsTemp:[]
},
},
created() {
this.$Spin.show();
//初始化
this.FormInitCompanyList();
var keyValue = $.request("keyValue");
if (!!keyValue) {
$.ajax({
type: "POST",
url: "/SystemOrder/Shipment/GetForm",
data: { keyValue: keyValue },
dataType: "json",
success: function (data) {
vm.ShipmentInfo = data.sysShipmentEntity;
//默认给列表数组赋值
vm.ShipmentInfo.ShipmentDetails = data.sysShipmentDetailsEntities;
//默认给临时过渡数组变量也赋值
vm.ShipmentInfo.ShipmentDetailsTemp = data.sysShipmentDetailsEntities;
debugger;
var type = $.request('type');
if (type=='@ConstantUtils.CRUD_AUDITING') {
vm.disabled = true;
}
setTimeout(function () { vm.$Spin.hide(); }, 1000);
}
});
}
},
methods: {
btn_Form(data) {
var j = vm.ShipmentInfo.ShipmentDetails;
var jsonarray = eval(vm.OrderSalesInfo.SysOrderDetails);
for (var jj = 0; jj < j.length; jj++) {
if (vm.OrderSalesInfo.F_OrderSales_Id == j[jj].F_OrderSales_Id) {
this.$Notice.warning({
title: '提示',
desc: '该订单已经添加过了!'
});
return;
}
}
for (var i = 0; i < jsonarray.length; i++) {
var arr =
{
'F_OrderSales_Id': jsonarray[i].F_OrderSales_Id,
'F_Product_Id': jsonarray[i].F_Product_Id,
'F_Product_Name': jsonarray[i].F_Product_Name,
'F_Product_Guige': jsonarray[i].F_Product_Guige,
'F_Product_Nums': jsonarray[i].F_Product_Nums,
'F_Remarks': jsonarray[i].F_Remarks,
}
vm.ShipmentInfo.ShipmentDetailsTemp.push(arr);
}
//临时变量赋值给列表绑定数组
vm.ShipmentInfo.ShipmentDetails = vm.ShipmentInfo.ShipmentDetailsTemp;
//强制刷新
this.$forceUpdate();
},
}
})