前言：
这个问题我也是在今天写后台管理系统的时候才发现的一个小细节，也算是一个小Bug，百度没有找到答案，翻看了好多视频，最后在B站找到了，实属不易~~
环境介绍：
我使用的是Vue-cli + Element ui 搭建的后台管理系统，数据调用的是自己的一个本地 json 数据，下面我们先看一个关于这个小问题的视频
小bug
问题详细：
看我录制的视频上，当我点击 编辑 按钮时，弹出修改框，往里面随便写了一些数据，哎~ 当我点击右上角关闭时，弹出框关闭了，这时，我们发现，我们没有提交修改，但是页面上的数据已经发生变化了，这是为什么呢？？
这是因为我用 v-model 进行了数据双向绑定，数据发生改变时，对应的，页面数据也会发生变化，那怎么解决这个小问题呢？？
解决问题：
下面是我的编辑按钮代码和页面图片
<el-button size="mini"
@click="fromEdit(scope.$index, scope.row),modify = true">编辑
</el-button>
点击编辑按钮时，令 modify = true 继而调用弹框，还有一个单击事件函数 fromEdit(scope.$index, scope.row) 下面我们看看这个函数的具体方法
// 编辑操作
fromEdit(index, row){
// console.log(row.id); 获取当前点击的 id
// 赋值新列表editlist，再进行页面输出
this.editlist = row;
}
当我们在页面上点击编辑后，由于 v-model 是数据双向绑定，当数据发生改变时，页面数据也会发生变化，这时我们将编辑函数改成下面那样，就可以解决这个问题了！
// 编辑操作
fromEdit(index, row){
// 服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组
// this.editlist = row;
this.editlist = JSON.parse(JSON.stringify(row));
},
这个 JSON.parse() 函数的主要意思就是：服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组，如果还想要了解更多关于这个函数的一下知识点，可以去问问度娘！
需要注意一下：此方法仅对后台数据为 json 数据才会生效，其他数据类型不生效
最后，当我们保存刷新页面之后，回到编辑页面，我们点击编辑，随便往一个输入框输入数据时，不提交修改的情况下，点击右上方的关闭 x 时，页面数据并没有发生任何变化，到此，问题已经成功解决。