Vue如何同时监听多个属性

发表于 分类于 / / Changyan：

在使用 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
export default {
  data() {
    return {
      name1: '',
      name2: '',
      age: ''
    };
  },
  computed: {
    listenChange() {
      const { name1, name2 } = this;
      return { name1, name2 };
    }
  },

  watch: {
    listenChange(val) {
      console.log('listenChange :', val);
      if (val.name1 === val.name2) {
        this.$set(this, 'age', 1);
      } else {
        this.$set(this, 'age', null);
      }
    }
  }
};

如果不能直接监听多个属性的话，我们可以换个想法，先将多个属性放在一个对象中，直接监听这个对象就可以了，这时候返回的 val 将会打印出你输入的 name1，name2 的内容，可以同时监听到这两个属性。