el-form-item v-for :rules 校验失效
时间: 2023-02-08 22:22:51 浏览: 135
在使用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个字符' },
]
}
}
```
这样就可以避免出现校验失效的情况。
相关问题
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 :rules
el-form-item 的 rules 属性是用来定义表单项的校验规则的。它是一个数组,每个元素都是一个对象,用来描述一个校验规则。每个校验规则对象包含以下属性:
- required:是否必填,布尔类型,默认为 false。
- message:校验失败时的提示信息,字符串类型。
- trigger:触发校验的事件,字符串类型,默认为 'blur'。
- validator:自定义校验函数,Function 类型。
例如,下面的代码定义了一个必填项的校验规则:
```html
<el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
<el-input v-model="form.username"></el-input>
</el-form-item>
```