vue为动态生成的表单添加验证

目前我这边遇到一个需求就是需要渲染一个不定项的列表，每条数据字段名字相同，且需要为每条数据添加必填验证。

export default {
    data() {
      return {
		form:{
			paramList:[]
		},
		rules: {
          rule: [
            {required: true, message: '必填项', trigger: ['blur', 'change']}
          ]
        },
      }
   },
   mounted:{
		for(let x=0;x<8;x++){
			this.form.paramList.push({
				lower:'',
				uper:'',
				step:''
			})
		}
	}
 }

解决方法：

			<div class="w100" v-for="(item,index) in form.paramList">
                <el-form-item class="paramList" label-width="0"
                              :prop="'paramList.'+index +'.lower'"
                              :rules="rules.rule">
                  <el-input v-model="item.lower" placeholder="最小值"></el-input>
                </el-form-item>
                <el-form-item class="paramList" label-width="0"
                              :prop="'paramList.'+index +'.uper'"
                              :rules="rules.rule">
                  <el-input v-model="item.uper" placeholder="最大值"></el-input>
                </el-form-item>
                <el-form-item class="paramList" label-width="0"
                              :prop="'paramList.'+index +'.step'"
                              :rules="rules.rule">
                  <el-input v-model="item.step" placeholder="步长"></el-input>
                </el-form-item>
              </div>

如上代码所示: :prop="‘字段列表名.’+index +’.v-model所绑定的字段名’"。