elementUI表单form内双向绑定失败

环境：

element-ui2.13.0，vue 2.6.10，vueCli3.0初始化

问题：

form表单内部的表单控件双向绑定失效，表单控件不会显示选中项。如果单选，data内部会同步更新，但是表单控件不会显示已选项；多选时，data内部同步值很慢，只有最后选择的一项。此时当其他不关联表单控件变化时，有问题的表单控件可能会显示选中项，多选甚至会显示选中的多个，很诡异。

<template>
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery" @change="changeVal"></el-switch>
  </el-form-item>
  <el-form-item label="活动区域" prop="region" v-if="show">
    <el-select v-model="ruleForm.region" multiple placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          region: [],
          delivery: false,
        },
        show: false,
      };
    },
    created() {
      this.ruleForm = {}
    },
    methods: {
      changeVal(val) {
        this.ruleForm.region = [];
        this.show = val;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

  }
</script>

简述：

即时配送表单和活动区域关联，因此变化时清空了活动区域表单控件选项。生命周期创建完内执行this.ruleForm = {}，因为表单会出现编辑时对数据进行重新赋值。

问题产生原因：

• 生命周期创建完内执行this.ruleForm = {}
• 即时配送表单变化执行this.ruleForm.region = [];

重新赋值表单绑定对象ruleForm时没有region属性，表单关联又重新赋值了表单对象ruleForm的region属性，导致产生问题。

解决：

在生命周期创建完内执行this.ruleForm = {region:[]}。

因此要注意，当表单中有关联表单控件时，在回选表单数据重新赋值表单绑定对象时，即使被关联的表单的属性没有值也要有默认值。

本问题代码是抽离逻辑和无关代码的，只为清楚展示问题所在，实际项目中代码更复杂。下面是没问题代码：

<template>
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery" @change="changeVal"></el-switch>
  </el-form-item>
  <el-form-item label="活动区域" prop="region" v-if="show">
    <el-select v-model="ruleForm.region" multiple placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          region: [],
          delivery: false,
        },
        show: false,
      };
    },
    created() {
      this.ruleForm = {
        region: []
      }
    },
    methods: {
      changeVal(val) {
        this.ruleForm.region = [];
        this.show = val;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

  }
</script>