v-form表单使用v-if数据回显时候不能修改

项目场景：

     表单校验。表单使用v-if判断回显数据导致表单不能编辑。

---

问题描述

     表单校验，下拉框选项用v-if控制其他的值是否显示。新增没有问题。数据回显时候，在切换下拉框数据时候，v-if控制的值无法修改并且校验不会通过。（使用v-show，隐藏效果能实现。但该属性的校验并没消失会一直存在）

---

原因分析：

<template>
  <div class="app-container">
        <el-form ref="form" :model="form" label-width="130px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="选择选项" prop="checkVal">
            <el-select
              v-model="form.checkVal"
              filterable
              placeholder="请选择选项"
            >
              <el-option
                v-for="item in checkValList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.checkVal== 1"
            label="选项1的值"
            prop="checkOne"
          >
            <el-input
              v-model="form.checkOne"
              placeholder="请输入值"
            />
          </el-form-item>
          <el-form-item
            v-if="form.checkTwo== 2"
            label="选项2的值"
            prop="checkTwo"
          >
            <el-input
              v-model="form.checkTwo"
              placeholder="请输入值"
            />
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单模块
      form: {
        name: "",
        checkVal: "",
        checkOne:"",
        checkTwo:"",
      },
      checkValList:[
          {label:'1',value:'1'},
          {label:'2',value:'2'},
		]
    };
  },
};
</script>

     数据回显的时候，Vue创建form表单实例的时候，v-if控制隐藏的属性没有添加到实例上面，导致数据不能双向绑定。并且不能触发视图更新。

---

解决方案：

在项目回显的时候，把v-if控制的隐藏属性全部添加到form上面

<script>
export default {
  data() {
    return {
      // 表单模块
      form: {
        name: "",
        checkVal: "",
        checkOne:"",
        checkTwo:"",
      },
      checkValList:[
          {label:'1',value:'1'},
          {label:'2',value:'2'},
		]
    };
  },
   methods: {
      /** 修改按钮操作 获取值之后  */
      handleUpdate(row) {
      // 根据自己的后台接口返回的数据
      var data = {...}
      this.form = data
      // 进行判断，判断返回数据里面有没有v-if控制的属性，如果没有，手动添加到实例上面
      if (this.form.checkOne == undefined) {
          this.$set(this.form, "checkOne", "");
        }
        if (this.form.checkTwo == undefined) {
          this.$set(this.form, "checkTwo", "");
        }
    },
};
</script>