最近项目里遇到的   记录下 解决方法

在获取值的时候除了给form赋值,还需要再存一个值。form与存的值去比较。

一般form值是个复杂对象。它的存储方式是存一个引用地址。当值改变的时候可能引起所有引用该地址的变量都改变。所以需要先深拷贝。再比较两个值是否一样。判断两个对象是否相等

    // data里
    form:{},
    prevform:{}
    
    
    // 获取数据渲染表格数据时 深拷贝
    
    this.form = res
    this.prevform = JSON.stringify(res) //此时直接等于res的话,与form存储的是同一地址,form改变,prevform改变
    
    
    // 在确定事件里 判断对象是否相等
    onOk(){
        if(JSON.stringify(this.form) !== this.prevform) {
        不相等做的事
    }else{
        相等做的事
    }
    }

扩展(漏洞)

res返回的是 name: 'wed',age:'22', 用来比较存起来的值prevform JSON转化的结果也是"name:wed, age: 22"

然后页面渲染不知道什么操作(没有人为操作页面改值)。最后form变成age:'22',name:'wed';

值并没有改变,但是按上面的方法判断是false 值改变了

解决

关键:判断两个对象属性值有没有改变

我这里直接用了lodash库的isEqual方法

.vue文件

需要注意prevform得是对象{}不是json字符串

// methods里

getDate() {
    this.prevform = JSON.parse(JSON.stringify(res))
    this.form = res
}

isChanged() {
      const _ = require('lodash');
      
      return !_.isEqual(this.form, this.prevform)
    },

Logo

前往低代码交流专区

更多推荐