vue 循环出来的值如何做校验

form表单提交校验  刚开始我就很通俗的 给form绑rules   return里去定义  效果一直是有值还提示我输入 后来一想我的值是通过数组循环出来的 获取不到我的值

错误示范：

 <el-form ref="form" :model="form" :rules="rules" >
     <div class="list-froms" v-for="(item, index) in form.contractDtlList" :key="index">
         <el-form-item label="订单数量" prop="itemQty">
              <el-input placeholder="请输入" v-model="item.itemQty"></el-input>
          </el-form-item>
           <el-form-item label="订单单价" prop="price">
              <el-input placeholder="请输入" v-model="item.price"></el-input>
          </el-form-item>
     </div>
</el-form>


data() {
    return {
      form: {
 contractDtlList: [],
          },
 
      rules: {
        price: [
          { required: true, message: "该输入项为必填项!", trigger: 'blur'},
        ],
        itemQty: [
          { required: true, message: "该输入项为必填项!", trigger: 'blur' },
        ],
      
      }
    };
  },

我一直都以为是我绑值的问题 最后发现是要通过下标去找到每一个循环出来的值

更改后：

 <el-form ref="form" :model="form" :rules="rules" >
     <div class="list-froms" v-for="(item, index) in form.contractDtlList" :key="index">
        <el-form-item label="订单数量" 
            :prop="`contractDtlList.${index}.itemQty`" 
            :rules="rules.itemQty">
              <el-input placeholder="请输入" v-model="item.itemQty"></el-input>
          </el-form-item>
        <el-form-item label="订单单价" 
            :prop="`contractDtlList.${index}.price`" 
            :rules="rules.price">
              <el-input placeholder="请输入" v-model="item.price"></el-input>
          </el-form-item>
     </div>
</el-form>


data() {
    return {
      form: {
 contractDtlList: [],
          },
 
      rules: {
        price: [
          { required: true, message: "该输入项为必填项!", trigger: 'blur'},
        ],
        itemQty: [
          { required: true, message: "该输入项为必填项!", trigger: 'blur' },
        ],
      
      }
    };
  },

也可以通过不同显示用三目运算符去做校验  如下：

 <el-form ref="form" :model="form" :rules="rules" >
     <div class="list-froms" v-for="(item, index) in form.contractDtlList" :key="index">
        <el-form-item label="订单数量" 
            :prop="`contractDtlList.${index}.itemQty`" 
            :rules="rules.itemQty">
              <el-input placeholder="请输入" v-model="item.itemQty"></el-input>
          </el-form-item>
      <el-form-item label="订单单价" 
            :prop="`contractDtlList.${index}.price`" 
        :rules="form.activeForm == 3 || form.activeForm == 2? rules.price:rules.itemQty">
              <el-input placeholder="请输入" v-model="item.price"></el-input>
          </el-form-item>
     </div>
</el-form>


data() {
    return {
      form: {
 contractDtlList: [],
          },
 
      rules: {
        price: [
          { required: true, message: "该输入项为必填项!", trigger: 'blur'},
        ],
        itemQty: [
          { required: true, message: "该输入项为必填项!", trigger: 'blur' },
        ],
      
      }
    };
  },

rules可以定义多个及不同的规则