vue-v-model 雙向綁定-編輯彈框修改數據后頁面數據跟着更改（取消彈框操作也已經被修改數據），利用 Object.assign解決對象引用同址問題

在做項目中經常會遇到table表格某行進行編輯。

當編輯表格行時彈出一個浮框，里面被賦值當前表格的各個元素。可以在此元素的基礎上進行修改編輯操作。

一般浮框的輸入項是用雙向綁定v-model。

當點擊編輯按鈕時候把當前行的數據賦值給彈框內並渲染彈框數據。

這時候問題就容易出現了：浮框數據改變發現頁面數據也跟着改變了。

如果只有確認按鈕還能忍受，關鍵是數據已經改變，如果有取消編輯按鈕，數據一樣已經改變!

其實原因很簡單，數據是obj類型，賦值操作的時候把地址給共同綁定了。

這也是一個js的基礎問題，對象等賦值數據類型的值和址應用等知識點

解決方案很簡單，利用js提供的Object.assign()對象方法。

Object.assign()方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。

不會引用原地址。不會修改到原來的內容。

Edit (item) {
  let copy = Object.assign({}, item)
  this.addData = copy
  this.modal = true
},

整體代碼：

                     <a-table
                          :columns="columns"
                          :data-source="tables"
                    >
                        <p slot="tags" slot-scope="text,tags,i">
                            <a-button size="small" type="primary" @click="fnEdit(text,tags,i)">編輯</a-button>
                            <a-button size="small" type="danger" @click="fnRemoveBtn(tags,i)">刪除</a-button>
                        </p>
                    </a-table>

            fnEdit(text,tags,i){//編輯賬號
                // this.thisEditRow = tags//編輯業務時要防止數組和對象的引用類型，不能直接賦值
                 let copy = Object.assign({}, tags)//tags是所編輯本行內數據對象
                 console.log(copy)
                 this.thisEditRow = copy
                // this.thisEditRow.key = tags.key
                // console.log(text,tags,i)//點擊本文本，本行數據，本行的索引
                    this.showModal()
            },

另外附上彈框確認后把值附上去修改真正數據（顯示在列表內數據）：

            EditHandleOk(e) {
                this.visible=false
                console.log(this.thisEditRow)
                this.data.map((item,i)=>{
                    if(item.key==this.thisEditRow.key ){
                        this.data.splice(i,1,this.thisEditRow)
                    }
                })
            },

這樣即便是操作失誤，取消或×掉編輯對話框也沒關系了。數據不會被修改，只有在提交的時候才會修改頁面數據。

 

 

擴展：如果是數組，或者里面某一項是數組，先用JSON.stringify(data)轉換成字符串，再用JSON.parse(data)轉換回來就不會引用源地址了。