vue使用数组获取修改页面操作

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();

},

}

})

你可能感兴趣的:(vue使用数组获取修改页面操作)