elmentUl,Form 表单使用resetFields()之后数据消失不见

最新推荐文章于 2023-10-11 09:10:34 发布

拷贝忍者卡卡西

最新推荐文章于 2023-10-11 09:10:34 发布

阅读量960

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45670926/article/details/125620985

版权

最近做一个需求是一个表单确认添加数据，然后列表显示
在这里插入图片描述
列表显示

表单点击添加push到列表数组里面然后使用
this.$refs.from.resetFields()方法清除表单里面的数据
然后发现列表里面的数据消失了....
我明明清除了表单里面的数据为什么列表数据没了？？？一眼看到resetFields这个方法有点不对劲
最后我用定时器包裹this.$refs.from.resetFields(),
发现确实是他的原因，定时器三秒之后清除，发现列表数据三秒后消失了,
简短思考三秒钟，原因就是vue是响应式的，表单数据是个响应式的对象，我使用resetFields清除表单数据之后，响应式连带着把列表里面push的数据也清除了

修改办法：只要使用深拷贝就行，重新搞个没有响应式的数据就好了，我的做法如下
  this.drillingInformationList.push({ ...this.drillingInformationData })

不仅仅是push一个对象，不管什么操作只要是响应式的对象，都有这个问题使用$set改变数组某个值也是这个情况
 this.$set(this.drillingInformationList, this.editIndex, { ...this.editDrillingInformationData })
 this.$refs.editDrillingInformation.resetFields()