this.$refs.formRef.validate()数据提交验证时,ref所绑定的表单数据4种解决方案 外加一个欺骗 this.$refs.formRef 验证的方法
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
不能访问刷新即可。
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)