vue 判断值是否改变
vueelement 判断表单值是否改变
·
最近项目里遇到的 记录下 解决方法
在获取值的时候除了给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)
},
更多推荐
已为社区贡献1条内容
所有评论(0)