T O P

[资源分享]     el表单验证的坑

  • By - 楼主

  • 2021-03-28 18:00:26
  • 记录element组件el-form使用v-for和v-if时,验证数据时报错的处理。

    v-for问题

    使用v-for时导致表单验证出现this.$refs[formName].validate is not a function

    // $refs[formName]后面加多一个[0]
    this.$refs[formName][0].validate((valid) => {})
    

    v-if问题

    • 问题:通过v-if控制两个表单显示或隐藏的过程中,会出现验证失效、验证冲突、样式出错等情况。
    • 解决:给两个表单分别加key值。
    • 原因:即使两个表单绑定的值不同,但是浏览器在解析时,先解析第一个表单,此时表单上是没有绑定ref,之后再解析第二个表单时,浏览器发现这它的prop和第一个表单的prop一样,所以就认为这两个表单是同一个表单,就没有重新渲染,而ref本身是作为渲染结果被创建的,所以第二个表单没能成功绑定ref,验证就无法生效。

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册