el-form 校验有bug？用了v-if就不行了?这篇文章帮你搞定

前些天在用el-form发生了bug，校验规则明明是对的但是却校验不了,废话不多说直接上代码，这里我们只讲思路不讲细节

1, 第一种情况我给了上下两个el-form分别绑定对应的规则， "bug"当第一次是进入v-if被v-if包裹的el-form有校验v-else的el-form没有校验，当第一次是进入v-else情况则相反

<div v-if="true">
    <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name1">
        <el-input v-model="ruleForm1.name1"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div v-else>
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称2" prop="name2">
        <el-input v-model="ruleForm2.name2"></el-input>
      </el-form-item>
    </el-form>
  </div>

2，当我给v-else加上另一个el-form在下面的el-from永远可以校验

<div v-if="true">
    <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name1">
        <el-input v-model="ruleForm1.name1"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div v-else>
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px">
      <el-form-item label="活动名称2" prop="name2">
        <el-input v-model="ruleForm2.name2"></el-input>
      </el-form-item>
    </el-form>
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px">
      <el-form-item label="活动名称2" prop="name2">
        <el-input v-model="ruleForm2.name2"></el-input>
      </el-form-item>
    </el-form>
  </div>

3，当我给下面的两个el-form加上了个div之后 所有的el-form都正常了

<div v-if="true">
    <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name1">
        <el-input v-model="ruleForm1.name1"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div v-else>
    <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-form>
    </div>
  </div>

4，加上key值 也全部正常

<div v-if="true">
    <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name1">
        <el-input v-model="ruleForm1.name1"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div v-else>
    <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="活动名称" prop="name" :key="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
    </el-form>
    </div>
  </div>

但是当我们查阅文档资料 只给我们留下这句话 但是我们还是很懵 也无法解决我们的问题

既然说v-if是不行的 那么又怎么解释我用v-if上面有时候也行的情况？ 我查阅了很多资料 最后无果 我就想去看看 v-if到底做了什么

我们都被固有思维打败了 原本以为的是v-if会摧毁与重建 其实不是的他是分情况的 但上下结构相同 它只会对值做替换从而来提高性能而不是摧毁 而用了key就代表唯一性 也就是告诉vue 他们是唯一的 需要对其摧毁与重建 如果你理解了官方文档的这一句 那么赶紧回去看上面的代码 所有的问题都已解决

仍然理解不了的小伙伴留言问题哦 我会解答你的疑问 ~