element-ui表单验证无效解决
2019-08-26 05:46:22来源:博客园 阅读 ()
element-ui表单验证无效解决
最近在项目中遇到了一个需求,需要动态增减表单元素,同时给新增的表单元素增加校验规则。
element-ui官网给出了解决方案:点击新增按钮时,向循环渲染的数组中push新的对象,数据驱动视图,通过增加数据的方式来增加新的dom元素;同样的,通过删除循环遍历的数据来达到删除dom的效果。
但是,校验规则不起作用,即使填写了表单已经提示未填写。在仔细检查后发现,element-ui的表单校验规则中,el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。但和通常表单不同的是,该表单是动态增减的,对应el-form-item需要绑定的prop值必须带上遍历的索引值index:
<el-form ref="..." :model="test"> <div v-for="(item, index) in test.line" :key="index"> <el-form-item :prop="'line.'+index+'.value1'" :rules="{...}"> <el-input v-model="item.value1"></el-input> </el-form-item> <el-form-item :prop="'line.'+index+'.value2'" :rules="{...}"> <el-input v-model="item.value2"></el-input> </el-form-item> <div> </el-form> <script> export default { data() { return { test: { ..., line: [{ value1: '', value2: '' }] } } } } </script>
完整代码见element-ui官网的动态增减表单项
原文链接:https://www.cnblogs.com/jackzer666/p/11385343.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- HTML基础02 2020-06-09
- HTML表单标签 2020-05-27
- 阻止表单的默认提交事件 2020-05-23
- form提交表单时,action携带参数(form跳转页面时在rul中拼 2020-05-01
- Bootstrap4 面包屑导航+表单+输入框组+自定义表单 2020-04-16
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash