elementui中对于v-model绑定model.x.x变量的rules校验

最新推荐文章于 2025-06-20 09:30:37 发布

原创最新推荐文章于 2025-06-20 09:30:37 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

解决方案同时被 2 个专栏收录

8 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文探讨了在Vue应用中使用Element-UI构建前端时，如何确保`<el-form-item>`中prop属性与v-model绑定的model结构一致性，重点在于prop与model.userInfo.userName的正确匹配。通过实例展示了错误写法和解决方法，欢迎交流讨论。

背景：项目使用vue+element-ui搭建的前端框架

存在问题的写法如下：

部分model定义如下：

 model: {
        userInfo: {
            userName: "",
        },
  }

部分页面如下：

<el-col :span="8">
	<el-form-item label="姓名：" prop="userName" :rules="{ required: true, message: '姓名不能为空' }">
	  <el-input
		placeholder="请输入内容"
		v-model="model.userInfo.userName"
		maxlength="100"
		show-word-limit
	  ></el-input>
	</el-form-item>
</el-col>

解决方法如下：

<el-col :span="8">
	<el-form-item label="姓名：" prop="userInfo.userName" :rules="{ required: true, message: '姓名不能为空' }">
	  <el-input
		placeholder="请输入内容"
		v-model="model.userInfo.userName"
		maxlength="100"
		show-word-limit
	  ></el-input>
	</el-form-item>
</el-col>

解决的关键在于<el-form-item>标签中的prop属性，只有保证prop属性中的变量与表单中的v-model属性绑定的model之后的属性一致才可以。

欢迎大家评论交流