ivew表单校验踩坑记

2019年9月15日 259次阅读 来源: miomiomio

iview表单必填的*标志显示

使用iview自定义表单校验时，对于v-if显示状态的修改会影响*的显示

情况：

  • 使用v-if设置在新增是密码字段显示，编辑时不显示
  • 这时校验规则已完成，设置只有办公电话不是必填项
  • 切换到编辑时，密码字段消失，但是办公电话前会出现*

代码

<FormItem v-if="modalType===0" label="密码" prop="password">
    <Input type="password" v-model="userForm.password" autocomplete="off"/>
</FormItem>

截图

《ivew表单校验踩坑记》

修改：

将v-if修改为v-show，可以解决这个问题

原因：

  • v-if只有在条件成立时才会生成dom
  • v-show是先生成dom，再通过css控制显示隐藏
    原文作者：miomiomio
    原文地址: https://segmentfault.com/a/1190000017560817
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞