Vue+element循环表单验证

前情提示： 最近做项目，遇到提交表单中input循环检验，网上找了一些资料，最终整理一下

如上图，动态点击生成或者删除input并且校验，闲言少叙，上代码：

body部分：

<el-form-item v-if="id === 3" label="Title Text" prop="title">
   <div v-for="(item, index) in form.title" :key="index">
     <el-form-item :prop="'title.'+ index + '.input'" :rules="rules.title">
       <el-col :span="22">
         <el-input
           v-model="item.input"
           type="text"
           placeholder="请输入Title Text"
           maxlength="20"
           show-word-limit
         />
       </el-col>
       <el-col :span="2">
         <i v-if="form.title.length > 1" class="el-icon-circle-close ft-16 del" @click="delTitle(index)" />
       </el-col>
     </el-form-item>
   </div>
   <i class="el-icon-circle-plus ft-16 add" @click="addTitle" />
 </el-form-item>

data部分：

form: { 
        title: [{ input: '' }]
        },
rules: {
        title: [
          { required: true, message: 'title cannot be empty', trigger: 'blur' }
        ]
       }

我们需要为每个动态的input增加验证
首先：每个遍历出来的form-item添加rules
其次：form-item要绑定动态的prop,其具体写法为
:prop="‘遍历的字段.’+ index + ‘.字段里面的input属性’"
注意：一定不要遗露.，如上图：

以上，问题解决。
2020即将翻页，在不平凡的2020共建不平凡的自己，共勉！