web前端：element-ui表单验证无效解决

作者: jackzer 更新于： 2020-03-02 11:49:43

　　表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

　　最近在项目中遇到了一个需求，需要动态增减表单元素，同时给新增的表单元素增加校验规则。

　　element-ui官网给出了解决方案：点击新增按钮时，向循环渲染的数组中push新的对象，数据驱动视图，通过增加数据的方式来增加新的dom元素；同样的，通过删除循环遍历的数据来达到删除dom的效果。

　　但是，校验规则不起作用，即使填写了表单已经提示未填写。在仔细检查后发现，element-ui的表单校验规则中，el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。但和通常表单不同的是，该表单是动态增减的，对应el-form-item需要绑定的prop值必须带上遍历的索引值index: