Vue 如何监听复杂对象属性值改变

发表于 分类于 阅读次数： 本文字数： 264 阅读时长 ≈ 1 分钟

先说结论，可以通过 computed 和 watch 结合的方法实现监听复杂对象！

需求：有一个单选框按钮组（手动/自动），当点击手动时，输入框可以输入数值，当点击自动时，输入框禁用。

解决办法：

1.首先给单选框添加 change 事件（Element 组件库），实现当单选框按钮值改变时是否禁用输入框。
2.由于单选框的值会根据后端回传数据改变，所以通过 watch 方法监听单选框值改变，实现当后端回传数据导致单选框按钮值改变，而输入框未实现同步禁用的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 数据格式
controlData: [
        { key: 0, value: 24, unit: "℃" },
        { key: 1, value: 0, unit: "%" },
        { key: 2, value: 1, unit: "℃" },]

// 计算属性
computed: {
  computedFanEEV() {
    return {
      EEV: this.controlData[1].value,
      fan: this.controlData[2].value
    };
  }
},    

// watch 同时监听复杂对象的多个属性值改变
watch: {
  computedFanEEV: function(newFan, oldfan) {
    if (parseInt(newFan.EEV) === 0) {
      this.EEV1 = true;
      this.EEV2 = true;
    } else if (parseInt(newFan.EEV) === 1) {
      this.EEV1 = false;
      this.EEV2 = false;
    }
    if (parseInt(newFan.fan) === 0) {
      this.fan1 = true;
      this.fan2 = true;
    } else if (parseInt(newFan.fan) === 1) {
      this.fan1 = false;
      this.fan2 = false;
    }
  }
},