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>