循环校验el-form表单项

Question

我这个el-input可以自定义增添，外层用v-for控制的。我想让el-form的rule来校验每一个el-input。怎么写啊，

Answer 1

参照这个模式进行循环校验el-form表单项

<el-form label-position="right" :model="loginInfo" :inline="true" label-width="55px" :rules="rules">
            <div v-for="(item,index) in loginInfo.dataList" :key="index">
                <el-form-item label="用户名" :rules="rules.username" :prop="`dataList.${index}.username`">
                    <el-input v-model="loginInfo.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" :rules="rules.password" :prop="`dataList.${index}.password`">
                    <el-input v-model="loginInfo.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" >取消</el-button>
                    <el-button type="primary" @click="doLogin">登录</el-button>
                </el-form-item>
            </div>
        </el-form>

   data(){
        return{
            loginInfo: {
                dataList: [{username:'', password:''}]
            },
            rules:{
                username:[{required: true, message: '请输入用户名', trigger: 'blur' }],
                password:[{required: true, message: '请输入用户名', trigger: 'blur' }],
            },
     }
  }

 this.$refs.loginInfo[index].validate((valid)=>{
                if(valid){
                    alert('提交成功')
                }
            })