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

最新推荐文章于 2024-06-28 11:01:26 发布

劉微明

最新推荐文章于 2024-06-28 11:01:26 发布

阅读量1.2k

点赞数 1

分类专栏：解决方案前端文章标签： vue.js elementui

本文链接：https://blog.csdn.net/l_d_w/article/details/118901649

版权

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

8 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

背景：项目使用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之后的属性一致才可以。

欢迎大家评论交流