Element-UI validation on dynamic items generated by v-for

Question

I want to validate fields in a table using element-ui and asyc-validator but not getting any clue how can I do that! Did't find any proper documentation and discussion thread so posting my question here.

vue template:

<el-form :model='myForm' :rules='rules' ref='myForm'>
  <div v-for="(item, index) in items" :key="index">
    <div class="col">
      <el-form-item label="Description" prop="description">
        <el-input v-model="item.description"></el-input>    
      </el-form-item>
    <div>
    <div class="col">
      <el-form-item label="Price" prop="price">
        <el-input v-model="item.price"></el-input>    
      </el-form-item>
    <div>
  </div>
</el-form>

I have tried to set the rule like this, but its not working

rules: {
  "description": { required: true, message: 'is required', trigger: 'blur' },
  "price": { required: true, message: 'is required', trigger: 'blur' }
}

here is the jsfiddle: https://jsfiddle.net/cgL6y9kq/15/ Try to submit form, error will appear which will stay even you have filled in the required fields.

Answer 1

You need to set :props dynamically using index and add rule inside the el-form-item. Check the jsfiddle here: https://jsfiddle.net/cgL6y9kq/34/

<el-form-item label="Description" 
  :prop="'items.' + index + '.description'"
  :rules="{required: true, message: 'description is required', trigger: 'blur'}">
    <el-input v-model="item.description"></el-input>
</el-form-item>