vue 使用element表单不触发验证

　开发时遇到一个问题，复用element表单，通过v-if控制显示的表单项，一个状态是非必填输入框，另一个是必填输入框。从非必填的表单项切换为必填表单项后，去验证表单会出现验证通过的情况，但是必填项其实为空。

<template>
  <div class="div">
    <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
      <el-form-item v-if="flag" label="非必填：">
        <el-input v-model="formData.data"></el-input>
      </el-form-item>
      <el-form-item v-else label="必填：" prop="required">
        <el-input v-model="formData.required"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="clear">切换</el-button>
        <el-button @click="check">验证</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      test: "",
      testLabel: [],
      formData: {},
      flag: true,
      rules: {
        required: [{ required:true, message: '必填项', trigger: 'blur' }]
      },
    }
  },
  methods: {
    check() {
      this.$refs.form.validate((vaild) => {
        console.log(vaild)
      })
    },
    clear() {
      this.flag=!this.flag
      this.$refs.form.clearValidate()
      
    },
  }
}
</script>

默认出现的是非必填的表单项，然后点击切换按钮切换成必填的表单项，此时不填入内容，直接点击验证，会发现表单验证是通过的，验证规则并没有生效。

出现这种情况的原因是vue会有dom节点复用问题，使用v-if的时候加一个唯一的key即可解决这个问题。

<el-form-item v-if="flag" key="notRequired" label="非必填：">
  <el-input v-model="formData.data"></el-input>
</el-form-item>
<el-form-item v-else key="required" label="必填：" prop="required">
  <el-input v-model="formData.required"></el-input>
</el-form-item>