Vue对话框里的表单 浅拷贝与深拷贝的问题解决（element）

浅拷贝与深拷贝的基本原理请自行百度

首先来看看遇到的问题

在对话框中修改数据，页面中也会随着对话框中数据的修改而修改

再来看看代码中的赋值

这样只是浅拷贝了row对象的地址给vipDataDialog，也就是说两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的

我们只需要进行深拷贝一下，把地址里面的值也拷贝一份出来

错误的方法：

这样点出来的对象由于没有双向绑定的功能 是不响应的，会出现表单无法编辑的问题（如下）

 不管我如何的输入，表单中的内容始终不变，连删除键也没用了 所以我们要用到vue中的一种方法（this.$set）来实现深拷贝并且能够和表单中的数据进行双向绑定 来解决这个问题

注意！！！如果要在.js后缀中使用这个方法要在页面顶部引入vue，不然会报错

import Vue from 'vue'
//js中使用
Vue.set(elem.vipDataDialog, 'discount', row.discount)

 在为.vue后缀中直接如下即可（因为vue的入口文件main.js中已经引入了vue，所以可以直接this.$set）语法：this.$set(对象,要创建的对象键,值)

		// 会员卡 编辑
			handleVipEdit(row) {
				var elem = this;
				elem.vipDataDialog = {};
				elem.vipDataDialog.handle = 'edit';
				elem.VipEditDialog = true;
                //elem.$set(对象,要创建的对象键,值) 语法
				elem.$set(elem.vipDataDialog, 'discount', row.discount)
				elem.$set(elem.vipDataDialog, 'id', row.id)
				elem.$set(elem.vipDataDialog, 'name', row.name)
				elem.$set(elem.vipDataDialog, 'orderNum', row.orderNum)
				elem.$set(elem.vipDataDialog, 'remark', row.remark)
				
			}