要实现在表单中的部分字段失去焦点后,将数据还原为进入弹窗时的接口数据,可以在进入弹窗时将接口数据保存为一个备份,然后在失去焦点的事件处理函数中将字段值设置为备份数据中相应字段的值。
如果 this.form.originalData
的值被同步修改,原因可能是因为 JavaScript 中的对象是引用类型。当你将一个对象赋值给另一个变量时,实际上是将引用地址赋值给了新变量,而不是复制对象本身。所以在这种情况下,如果你直接修改 this.form.originalData
中的字段,那么 this.form
中对应的字段也会被修改,因为它们引用的是同一个对象。
为了避免这个问题,你可以使用深拷贝来创建 this.form.originalData
的备份,确保备份和原始数据是两个独立的对象。
在Vue.js中,你可以使用 JSON.parse(JSON.stringify(object))
来进行深拷贝。修改示例代码如下:
- <el-form-item label="相机增益(db)" prop="cameraGain" label-width="100px">
- <el-input v-model="form.cameraGain" placeholder="请输入参数键名"
- @blur="handleBlurCameraGain" />
- </el-form-item>
- data() {
- return {
- form: {
- cameraGain: '',
- originalData: {
- cameraGain: '' // 进入弹窗时的接口数据备份
- }
- },
- };
- },
- mounted() {
- // 模拟获取接口数据并保存为备份数据
- this.getFormData().then(response => {
- this.form = response.data; //原数据
- this.form.originalData = JSON.parse(JSON.stringify(response.data)); //备份
- });
- },
- handleBlurCameraGain() {
- // 在失去焦点的事件处理函数中将字段值还原为备份数据中的值
- this.form.cameraGain = this.form.originalData.cameraGain;
- },
通过使用 JSON.parse(JSON.stringify(response.data))
对数据进行深拷贝,确保备份数据和原始数据是两个独立的对象。这样,当你修改备份数据的字段时,不会改变原始数据。
请注意,JSON.parse(JSON.stringify(...))
的方法对于大型复杂对象或包含非标准JSON数据的对象可能不适用。在这种情况下,你可能需要使用其他库或自定义函数来执行深拷贝操作。