element下拉框選擇值不更新問題

在使用vue+element ui 的時候遇到下拉框選擇值發生變化了，但是頁面值卻沒有更新

 

 

<el-form-item
              label="設備狀態："
              :label-width="formLabelWidth"
              prop="deviceState"
            >
              <el-select
                v-model="addDeviceForm.deviceStateName"
                placeholder="設備狀態"
                @change="onSelectedStatusAdd"
              >
                <el-option
                  v-for="item in check_status"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>

data里數據：
      // 新增/編輯設備
      addDeviceForm: {
        deviceId: "",
        deviceName: "",
        ip: "",
        deviceType: "",
        model: "",
        location: "",
        deviceGroup: "",
        deviceState: "",
        deviceGroupName: "",
        deviceStateName: ""
      },

出現這個問題是這邊循環的collector數組是動態獲取的，改變頁面其他選項都會修改collector的值，render函數沒有自動更新，所以在選擇的時候需要強制更新
解決方法：change方法加this.$forceUpdate()

// 新增/更新分組下拉
    onSelectedGroupAdd(val) {
      debugger;
      let obj = {};
      obj = this.check_group.find(item => {
        return item.dictValue === val;
      });

      this.addDeviceForm.deviceGroup = val; // 分組id
      this.addDeviceForm.deviceGroupName = obj.dictLabel; //     分組名稱
      this.$forceUpdate();
    },