问题
el-form表单,通过v-if控制显示的表单项,切换选项后表单验证失效。
优惠券没有验证提示出现。
<template v-if="type===1">
<el-form-item label="跳转链接" prop="jump_url">
<el-input v-model="jump_url"></el-input>
</el-form-item>
</template>
<template v-else>
...
</template>
原因
一开始以为是elementui表单验证没有匹配的问题,反复检查测试后发现:再增加一个表单项时,第一个验证无效,第二个有效:
经过查阅资料后发现,出现这种情况的原因是:绑定验证规则是在mounted中执行的,验证规则改变后没有重新绑定,vue复用dom节点,验证规则就失效了
通过vuedevtools可以看到当类型切换时,节点vm0被复用了。
vm0节点切换之前在备注上,切换之后,被复用到了优惠券上,导致验证失效。
。
解决办法
1.使用v-if的时候加一个唯一的key即可解决这个问题。
2.将v-else改为v-if。