你不知道的iview校验的坑

时间:2020-10-9 作者:admin
让你明明白白学知识,有代码,有讲解,抄的走,学的会!

场景:iview动态表单

iview版本号: 4.3.2

vue版本号: 2.6.11

场景描述:
在使用iview的表单校验的时候,有一种场景是,表单元素是动态的,也就是说,页面具体多少项,得根据数据来定

直接上图

目标: 在点击提交的时候,校验 姓名个人描述 非空

完整代码

<template>
  <div>
    <h3 style="text-align: center; margin-top: 20px;">动态表单校验</h3>
    <Row>
      <i-col :span='10' :offset='10'>
        <Form ref='formModel' v-model='formModel' :rules='rules'>
          <FormItem label='请选择'>
            <Select v-model='formModel.type'>
              <Option :value='1'>显示正文</Option>
              <Option :value='2'>显示标题</Option>
              <Option :value='3'>正文 + 标题 + 标签</Option>
            </Select>
          </FormItem>
          <FormItem v-if='isShowTitle' label='标题'>
            <i-input v-model='formModel.title'></i-input>
          </FormItem>
          <FormItem prop='name' label='姓名'>
            <i-input v-model='formModel.name'></i-input>
          </FormItem>
          <FormItem prop='desc' label='个人描述'>
            <i-input v-model='formModel.desc'></i-input>
          </FormItem>
          <FormItem label='附属信息'>
            <i-input v-model='formModel.attachInfo'></i-input>
          </FormItem>
          <FormItem label='正文' v-if='isShowContent'>
            <i-input v-model='formModel.content'></i-input>
          </FormItem>
          <FormItem>
            <Button type='primary' @click='submit'>校验</Button>
          </FormItem>

          <div v-show='showTips'>
            校验不成功
          </div>
        </Form>
      </i-col>
    </Row>

  </div>
</template>

<script>
export default {
  name: 'check',
  data () {
    return {
      rules: {
        name: [
          { required: true, message: '姓名不能为空' }
        ],
        desc: [
          { required: true, message: '描述文字不能为空' }
        ]
      },
      formModel: {
        name: '',
        desc: '',
        type: '',
        content: '',
        title: '',
        attachInfo: ''
      },
      showTips: false
    }
  },
  computed: {
    isShowContent () {
        return this.formModel.type === 1 || this.formModel.type === 3
    },
    isShowTitle () {
        return this.formModel.type === 2 || this.formModel.type === 3
    }
  },
  methods: {
    submit () {
      this.$refs.formModel.validate(valid => {
        if (!valid) {
          this.showTips = true
          return
        }
        console.log('ok')
      })

    }
  }
}
</script>

特意录制了gif 方便对比效果, 我们只校验 姓名 + 个人描述不能为空, 但是在我们动态切换 下拉选项的时候,就会出现如图的效果, 校验错位, 然后失效,this.$refs.formModel.validate 永远为 false

怎么解决上面的问题?

将 v-if 改为 v-show 去实现即可; 很多人习惯性的, v-if ,当遇到这样的问题时,真的不知道怎么解决,可能你都想不到需要改为 v-show , 这个bug应该是 iview 的

上面如果 v-if 都为 false的内容在一块, 也就是没有像我这样穿插显示隐藏的场景, 就不会出现这个问题

需要动态展示的内容都在下面, 需要校验的都在上面, 此时使用 v-if 和 v-show 校验结果上,没有区别,不会错位

快说,你有没有踩到这个坑 ?

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。