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();
    },