el-form-item v-for 校验失效

在使用 v-for 渲染 el-form-item 时，需要给每个 el-form-item 添加一个唯一的 key 值，这样才能正确地校验每个 el-form-item。如果不添加 key 值，那么校验会失效。
例如:

<el-form-item v-for="(item, index) in items" :key="index" :label="item.label" :prop="item.prop">
  <el-input v-model="item.value"></el-input>
</el-form-item>

这里我们用了 index 作为 key，也可以用 item.id 等其他唯一值。

相关问题

el-form-item的v-for

el-form-item的v-for是用来动态生成多个相同的el-form-item组件的。在这个例子中，v-for="(item, index) in form.input"表示在form.input数组的每一个元素上都会生成一个el-form-item组件。其中item是数组元素的值，index是元素的索引。这样就可以根据form.input数组的长度动态生成对应数量的el-form-item组件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [element-ui使用v-for循环el-form-item。并添加校验](https://blog.csdn.net/qq_33769914/article/details/122449601)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [el-form-item中使用v-if导致规则检验不生效问题](https://blog.csdn.net/qq_42715494/article/details/124930996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

el-form-item v-for :rules 校验失效

在使用v-for循环渲染el-form-item时，需要注意:rules的值应该是一个函数，而不是一个静态的数组。这样可以确保每一项都有自己独立的校验规则。

例如：

<el-form-item v-for="(item, index) in items" :key="index" :rules="getRules(index)">

methods: {
    getRules(index) {
        return [
            { required: true, message: '请输入内容' },
            { min: 5, message: '最少输入5个字符' },
        ]
    }
}

这样就可以避免出现校验失效的情况。