关于async-validator 表单重置后的初始值的问题
Element UI和iView 两个框架,他们表单验证使用的是async-validator
,所他们的重置表单的方法是一样的。
this.$refs[name].resetFields();
使用该方法,会重置校验状态和表单值,表单的值会恢复成默认的值。
那么,这个默认值的定义是什么?
我今天就遇到了一个情况,就是我的表单绑定的对象,是一个空值,然后我在这个元素被创建时,拿到props传过来的值赋值给表单对象。
当我再来改动表单内容后,进行表单重置时,发现,重置后表单显示的值居然是我从props中获取的那个。
也就是说,重置表单,他并没有恢复我表单对象的空状态。
所以我就在想,他的默认值是怎么判断的,我初步认为可能是克隆了一份,当表单初始化后,他会克隆一份绑定的表单对象,重置时再将这个对象重新赋值回来。
这样就说的通,为什么我重置表单后,值会是我从props拿到的值了,因为他克隆的时候,那份数据就已经存在了,所以恢复的时候并不是空值。
如何避免这个问题?
既然他克隆的时候我们已经赋值,说明我们赋值的操作是先于他的,所以我们可以将赋值放于this.$nextTick()
回调中赋值。
这样可以保证,在表单已经初始化好的情况下,我们赋值的值,那会已经克隆好了表单绑定的对象,所以,恢复的时候,也能恢复为空值。
个人测试,不会再出现重置后,值不为空值的情况。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
暂无评论数据