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

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

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

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

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

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

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

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

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

如何避免这个问题?

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

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

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

分类: vue 项目实战 标签: vue表单验证iviewelement表单重置async-validator初始值

评论

暂无评论数据

暂无评论数据

目录