解決elementUI表單資料新增和修改資料混亂
需求是:初期化一個table列表,可以對table列表資料進行新增和修改,點選新增和修改時彈出窗體,窗體繫結的資料是form裡的Model,開始的時候點選新增是可以的,後臺獲取前臺的資料是沒有id主鍵的,但是當點選修改的時候,因為把主鍵id賦值給了form表單,導致點選新增後form表單和點選修改時的資料相同了
下面是正常的操作
1:初期化
2:點選新增
3:點選修改
下面是沒解決問題前的操作
如果你先點了修改,再點選新增是下面這個介面,這個介面預設就載入了資料,而這種是不對的,應該預設為空,就算可以滿足你的要求,但是由於修改的時候傳入了id主鍵,這時候你本想新增的,到了後臺後就會變成修改了
Vue資料:
var goodsVue=new Vue({
data:{
form:{ }
}
Vue方法:
handleClick:function(row,mark) {
debugger;
this.dialogVisible=true;
if(typeof(row)!="undefined"){
this.sid=row.sid;
if(mark==1){
this.flag=true;
this.dialogTitle="檢視資訊";
}else{
this.flag=false;
this.dialogTitle="編輯資訊";
}
this.form=JSON.parse(JSON.stringify(row));
}else{
this.form={};//不要用這種 this.form='';
this.dialogTitle='新增商品';
}
}
------------------------------------分割線------------------------------------------------------------------
!!解決辦法:新增時加上這句話 this.form={}
this.form={}這個的意思是把表單初始化為一個空物件,後期可以往這個物件裡賦值
this.form=' ' 這個的意思是把form表單初始化成了一個空字串,後期是沒辦法新增表單裡其他值的