ElementUI表单验证错误提示不消失原因（最全面，一次解决）

最新推荐文章于 2024-05-22 10:38:57 发布

weixin_46463341

最新推荐文章于 2024-05-22 10:38:57 发布

阅读量1.1w

点赞数 12

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_46463341/article/details/127397803

版权

本文探讨了Vue中使用Element-UI组件库时，el-form和el-form-item出现错误提示不消失的常见原因。问题主要集中在el-form的:model属性未正确绑定以及el-form-item的prop与v-model值不匹配。解决这两个问题，可以确保表单验证正常，消除错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.原因1：el-form-item上的 prop

网上最普遍回答 prop必须与v-model绑定的参数一致
在这里插入图片描述

2.原因2：el-form上的 :model

网上没找到，自己发现的，也是最容易忽略
el-form 标签上必须加上 :model=“form” (不是常用的vue标签v-model)
form是表单数据的父节点

在这里插入图片描述

错误提示不消失，是规则没有错误并且绑定成功，但是el-form和el-forn-item标签内部显示错误，导致显示错误的原因就是
1.el-form上:model="form"没有绑定或者使用了vue中常用的v-model的标签
2.el-form-item上 prop，绑定的值需要与el-input上双向绑定的v-model的参数一样，否则绑定失败。
解决以上两个问题，就能解决错误提示不消失。