vue表格编辑弹出模态框，v-model绑定原有值，在点击关闭或取消编辑时仍然改变了原有的值

解决vue中采用v-model双向绑定数据时导致修改了数据后取消编辑，原有数据改变的问题

最近在使用vue，但是之前没有系统地学习过vue，所以都是一边看官方文档，面向百度搜索进行前端开发。最近在对table表格中的某项数据进行修改时遇见了一些问题，在网上看了一下解决方案，但都不太完整，在此整理记录一下，一方面自己记录一下，一方面希望能帮助到像我一样在不断踩坑的vue小白。

问题描述

话不多说，上图。添加数据后，表格中显示如下：

点击编辑时弹出模态框，在模态框中的输入框采用v-model对数据进行双向绑定

这时候，对模态框中的输入框的值，比如这个证件号的值进行修改，但是最终又取消编辑或者是直接关闭模态框

在表格中可以看到，数据因为v-model的双向绑定而改变了。

这…所以我就去百度了，然后看到了一篇博文获得了一点启发，了解到了Object.assign()的使用方法：
看这里

解决方案

思路就是，文本框的值进行修改时不改变原有的值，只有当点击确认时才对原值进行修改。代码改造如下：
表格点击编辑事件：

EditQlr (index, type) {
                this.isEdit = index
                if (type === 0) {
                    this.modalTitle = '编辑权利人'
                    //this.possessorAdd = this.dsQlr[index]
                    //使用Object.assign()防止原值被修改
					let copy = Object.assign({}, this.dsQlr[index])
					this.possessorAdd = copy
                }
                this.showModal()
},

到这里还没结束呀，这样修改后就会发现无论点确认还是取消还是关闭模态框，修改过后的值都不能改变原值。那再处理一下模态框的点击确认事件。

后来通过百度，了解了$.set的使用方法

okModal () { 
      //this.isEdit指的是编辑的第几项，
      //默认值为-1，表示是添加时点击确认按钮，
      //>-1表示在编辑时点击确认按钮需要做的操作
	if(this.isEdit>-1){
	   //this.dsQlr：表格的数据源
	   //this.isEdit：表示当前编辑的第几项
	   //this.possessorAdd：模态框绑定的数据
		this.$set(this.dsQlr,this.isEdit,this.possessorAdd)
    }
	//其他操作
	......
}

到此，问题就解决了。点击取消和关闭模态框不会改变原值，只有点击确认才会修改。

好记性不如烂笔头。