el-form form loop validation

<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>

Remember here
1, the data structure is form.dataList,
2, the div for loop is inside the form
3, :rules="rules", always use from.

   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('提交成功')
                }
            })