Element-UI 对 v-for 生成的动态项进行验证

Question

我想使用 element-ui 和 asyc-validator 验证 table 中的字段，但不知道我该怎么做！没有找到任何合适的文档和讨论主题，所以在这里发布我的问题。

vue 模板：

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

我试过这样设置规则，但它不起作用

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

这是 jsfiddle：https://jsfiddle.net/cgL6y9kq/15/ 尝试提交表单，将出现错误，即使您已填写 requi 红色字段，该错误仍将存在。

Answer 1

您需要使用索引动态设置 :props 并在 el-form-item 中添加规则。在此处检查 jsfiddle：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>

Element-UI 对 v-for 生成的动态项进行验证

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

validation

vue.js

element-ui