this.$refs[formName].resetFields()；之后遇到的值替换bug

陈不知代码

于 2023-03-10 11:17:43 发布

阅读量663

点赞数 2

文章标签： bug javascript vue.js

本文链接：https://blog.youkuaiyun.com/CHENC0518/article/details/129439007

版权

在开发过程中发现一个表格编辑bug，当取消编辑时，未使用深拷贝导致值被上一次编辑替换。解决方案是，对传入的行值进行深拷贝，以确保数据独立不互相影响。提供的deepCopy函数用于实现对象和数组的深拷贝。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.最近开发之中，发现了一个非常奇妙的bug

2.就是当我编辑一个表格时，会触发编辑弹框事件

3。当我取消该次编辑事件时，调用，this.$refs[formName].resetFields()，会发现再次编辑其他行，取消编辑时，值被上一次的替换了。

4.原因是，值没有进行深拷贝，导致，响应式变化

5.我们只需要对传过来行的值进行深拷贝即可


/**
 * 实现数组和对象的深copy
 * @param {*} obj 传入的对象
 * @returns 返回一个新的对象
 */
export function deepCopy(obj){
  let type = Object.prototype.toString.call(obj)
  if(type == "[object Array]"){
      let backObj = [];
      for(let val of obj){
          backObj.push(deepCopy(val))
      };
      return backObj;
  }
  if(type == "[object Object]"){
      let backObj = {};
      for(let key in obj){
          if(obj.hasOwnProperty(key)){
              backObj[key] = deepCopy(obj[key])
          }
      };
      return backObj;
  }
  return obj;
}