Vue this.$refs.formRef.validate() 四种报错场景:

在提交表单结果的时候出现报错


1. 找不到ref值的情况:

Error in v-on handler: “TypeError: Cannot read property ‘validate’ of undefined”
在这里插入图片描述

解决方法

看看
在这里插入图片描述
中的 formRef<el-form ref="formRef"></el-form>中的 formRef是否一致,改为相同。


2. 模型没有验证时的情况:

[Element Warn][Form]model is required for validate to work!

在这里插入图片描述

解决方法

这算是个警告,绑定模型即可
在这里插入图片描述


3. 验证结果不是函数时的问题:

[Vue warn]: Error in v-on handler: “TypeError: this.$refs.formRef.validate is not a function”
在这里插入图片描述
我这里出现问题的原因是在这里插入图片描述
不小心把 ref 写在了 item 中。
写上去即可。

解决方法

ref:model 写在 <el-form> 中即可。


4. 验证数据结构不一致的情况:

Invalid prop: type check failed for prop “model”. Expected Object, got Array
在这里插入图片描述
这里我们,后端需要的数据是对象,而得到的却是数组。
解释一下我的原因,我的表单是由 sleepForm 通过 v-for 得到的,而后端需要的是form验证表单:
在这里插入图片描述

解决方法

重写数据结构 或者 重新绑定验证规则 或者参考方法5:


5. 欺骗 this.$refs.[formRef]()

就是写一个新的表单验证:
在这里插入图片描述
以上4种问题皆可用此方法解决。
这里的新表单 <el-form> 中不需要包含真正的表单数据,算是一种方法,绑定model即可。
这里需要与后面的 this.$refs.forRef 规则对应即可。


这里附带一下本项目代码错误之源的链接https://gitee.com/ashy66/hellomybody/blob/master/src/components/Users/cpsm.vue

不能访问刷新即可。

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐