你不知道的iview校验的坑

让你明明白白学知识，有代码，有讲解，抄的走，学的会！

场景：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')
  		this.showTips = false
      })
  
    }
  }
}
</script>

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

怎么解决上面的问题？

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

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

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

element-ui 2.13.2 已经测试过，没有发现上面的bug 😂

快说，你有没有踩到这个坑 😁