• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

关于async-validator 表单重置后的初始值的问题

Element UI和iView 两个框架,他们表单验证使用的是async-validator,所他们的重置表单的方法是一样的。

this.$refs[name].resetFields();

使用该方法,会重置校验状态和表单值,表单的值会恢复成默认的值。

那么,这个默认值的定义是什么?

我今天就遇到了一个情况,就是我的表单绑定的对象,是一个空值,然后我在这个元素被创建时,拿到props传过来的值赋值给表单对象。

当我再来改动表单内容后,进行表单重置时,发现,重置后表单显示的值居然是我从props中获取的那个。

也就是说,重置表单,他并没有恢复我表单对象的空状态。

所以我就在想,他的默认值是怎么判断的,我初步认为可能是克隆了一份,当表单初始化后,他会克隆一份绑定的表单对象,重置时再将这个对象重新赋值回来。

这样就说的通,为什么我重置表单后,值会是我从props拿到的值了,因为他克隆的时候,那份数据就已经存在了,所以恢复的时候并不是空值。

如何避免这个问题?

既然他克隆的时候我们已经赋值,说明我们赋值的操作是先于他的,所以我们可以将赋值放于this.$nextTick()回调中赋值。

这样可以保证,在表单已经初始化好的情况下,我们赋值的值,那会已经克隆好了表单绑定的对象,所以,恢复的时候,也能恢复为空值。

个人测试,不会再出现重置后,值不为空值的情况。

9

相关文章

微信收款码
微信收款码