element-ui表单验证一直提示不能为空

最新推荐文章于 2026-05-30 11:38:43 发布

原创最新推荐文章于 2026-05-30 11:38:43 发布 · 2.5w 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文解析了Element UI中表单组件的正确使用方法，强调了form-item的prop属性需与model绑定属性一致的重要性。通过具体示例展示了如何修正prop属性以避免表单验证错误。

文档没写出来：form-item的prop属性要和model绑定的属性一直，坑。

原来的的代码：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="活动名称" prop="test">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

原因是输入框绑定的model是name属性，因此prop也应该由“test”改为name即可

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>