vue el-form 遇上 v-if,表单校验不生效问题
el-form遇上v-if,表单校验不生效问题
·
最近遇到一个坑,在用 element中 的 form 表单校验的时候,因为有些字段是根据特殊条件来设置显示隐藏的,所以用了 v-if 控制显示;但是发现用 v-if 控制的表单元素总是无法被校验。
咦???
所以,我就试试用 v-show 来控制表单元素,然而发现,用 v-show 来控制的表单元素在隐藏状态下时,表单也会校验这个字段。
关于 v-if 和 v-show 的区别,之前有例子比较过,传送门:v-show 和 v-if
查找资源,发现原因原来是:
【1】使用 v-if:element在对form表单中带有prop属性的子组件进行校验规则绑定时,是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的,导致了v-if内的表单项,由于在mounted时期没有进行渲染,所以规则也没有绑定上,因此初始化时不符合显示条件的不会生成规则,导致后面切换条件,显示的输入框的校验不会生效。
【2】使用 v-show:初始化时会生成所有的规则,即使隐藏了也会进行规则校验。
解决方法:
给设置 v-if 的元素加上key值,如下所示:
<div v-if="activeStep==3">
<el-form-item label="活动名称" prop="title" key="title">
<el-input :maxLength="20" v-model="form.title" placeholder="请输入活动名称,不能超过20个字" clearable></el-input>
</el-form-item>
</div>
规则如下:
rules: {
title: [{ required: true, message: '请输入活动名称,不能超过20个字', trigger: 'blur' }]
}
原因:因为在v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况(同理,所以 v-for 渲染的标签也要加key来区分)。而原本这些标签每一个都是独立的,所以需要添加key来做区分。
更多推荐
已为社区贡献12条内容
所有评论(0)