vue中resetFields重置初始值不生效的原因详解
作者:张大牛Zz 时间:2024-05-29 22:29:12
问题
最近在做项目的时候, dialog组件回调close里面 一般我都会加个resetFields 重置初始值和校验
其他地方都没问题, 在table组件里面出问题了, 后来经过监听vue tools, 查看到resetFields后, formData没变, 最后也找到原因了.
解决
1、用 dialog【新增】、【修改】数据
2、先点击了【修改】,弹出弹窗,此时弹窗的form表单已经赋值
3、再点击新增按钮,此时调用resetFields()方法是没有办法使form清空的
如果直接只写this.$refs.formRef.resetFields()
因为编辑操作是有数据回显的, 数据回显是在mounted阶段渲染上去的,
而 resetFields是将form表单重置到初始值,而这个初始值是form表单mounted后的值
结果就导致只能清空校验, 不能重置表单到我们想要的初始值
所以直接this.$data.roleFrom=JSON.parse(JSON.stringify(this.$options.data().roleFrom))
深拷贝roleForm yeah! 完成
引申
我的其他页面为什么没问题呢? 我后来去看了其他组件的dialog为什么数据回显没问题, 因为其他组件我用到了watch 根据id变化执行渲染, 每次dialog close回调我都会主动把id清空为空字符串, 正好那个接口id如果为空字符串也会发请求, 获取的数据正好和回显的值不对应, 所以就为空了。本质上是重新发了请求,但正好因为数据不对应不显示,造成了添加操作时数据为空的正确表象。
总的来说还是不严谨, 我这里要修改代码,watch这里加个if的意思是每次关闭会重置,但是打开不用重置。
① 子组件 watch if newVal===" " 上面的表单重置方法(这里空字符串我特意加了个空格看的清楚点, 实际重置不用加空格)
② 父组件dialog close回调里面添加一条 isEdit=false 防止子组件watch id变化为空字符时重复发ajax
加个补充
还有一点就是如果每次获取都是用ajax去获取数据, 那获取的也是新地址对象, 只是因为我部分数据用了本地已存在的引用数据, 所以才会有这种情况, 所以大家用引用数据一定要注意, 如果发现有关联关系, 且影响业务, 都深拷贝一份吧
来源:https://blog.csdn.net/qq_59650449/article/details/128493928
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python批量修改xml属性的实现方式
![](https://img.aspxhome.com/file/2023/6/135046_0s.jpg)
基于python调用psutil模块过程解析
Python实现的大数据分析操作系统日志功能示例
详解appium+python 启动一个app步骤
![](https://img.aspxhome.com/file/2023/3/70203_0s.png)
python线程join方法原理解析
JS中的算法与数据结构之集合(Set)实例详解
在CMD中操作mysql数据库出现中文乱码解决方案
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
![](https://img.aspxhome.com/file/2023/4/100274_0s.jpg)
教你用Python实现简易版学生信息管理系统(含源码)
Python实现ATM系统
有关缓存 Cache 的随想
![](https://img.aspxhome.com/file/UploadPic/20086/9/200869143245569s.jpg)
107条javascript(js)常用小技巧
MySQL基础教程之事务异常情况
![](https://img.aspxhome.com/file/2023/8/128058_0s.jpg)
100行Python代码实现每天不同时间段定时给女友发消息
![](https://img.aspxhome.com/file/2023/3/82833_0s.jpg)
go语言开发中如何优雅得关闭协程方法
python Copula 实现绘制散点模型
![](https://img.aspxhome.com/file/2023/9/109349_0s.png)
php引用地址改变变量值的问题
解决Python中字符串和数字拼接报错的方法
![](https://img.aspxhome.com/file/2023/4/128594_0s.jpg)
Silverlight VS Flash,谁更强?
MVC4制作网站教程第二章 用户注册2.1
![](https://img.aspxhome.com/file/2023/6/77196_0s.png)