在 Vue.js 中,使用 watch 监听data变量如:对象属性/data变量

 watch 监听对象属性

在 Vue.js 中,使用 `watch` 监听对象属性的变化时,应该将属性名作为字符串传递给 `watch` 选项。

示例如下:

```javascript

watch: {
  'addform.isCheck1': function(newValue) {
    console.log(newValue);
    var quantity = this.addform.quantity;
    if (quantity % 2 === 0) {
      quantity = quantity / 2;
    } else {
      quantity = (quantity - 1) / 2;
    }
    this.updateAddChuZhenForm("上午", quantity, newValue);
  },
  'addform.isCheck2': function(newValue) {
    var quantity = this.addform.quantity;
    if (quantity % 2 === 0) {
      quantity = quantity / 2;
    } else {
      quantity++;
      quantity = quantity / 2;
    }
    this.updateAddChuZhenForm("下午", quantity, newValue);
  }
},

updateAddChuZhenForm函数

//检查数组中是否已存在具有相同 sign 标识的对象。如果存在,它会更新对象的选中状态;如果不存在,它会添加一个新对象。如果取消选中,它会在数组中查找并删除相应的对象。
    updateAddChuZhenForm(sign, quantity, isChecked) {
      console.log(quantity);
      const existingIndex = this.addChuZhenForm.findIndex(
        (obj) => obj.sign === sign
      );

      if (isChecked) {
        if (existingIndex === -1) {
          this.addChuZhenForm.push({
            department_id: this.addform.department_id,
            room_id: this.addform.room_id,
            doctor_id: this.addform.doctor_id,
            inquiry_time: this.addform.inquiry_time,
            quantity: quantity,
            sign: sign,
          });
        }
      } else {
        if (existingIndex !== -1) {
          this.addChuZhenForm.splice(existingIndex, 1);
        }
      }
    },

现在,当 `isCheck1` 或 `isCheck2` 的值发生变化时,相应的 `watch` 函数将被触发。
```

watch监听data变量

如果你想要监听一个普通变量,而不是 Vue 实例的属性,你可以使用 `watch` 选项以及直接在 `data` 中声明这个变量。

比如:如果你想监听一个名为 `variableToWatch` 的变量,可以这样做:

```javascript

data() {
  return {
    // 其他的data属性
    variableToWatch: false,
  };
},
watch: {
  variableToWatch(newValue) {
    // 在这里可以处理变量变化的逻辑
    console.log('变量的值变为:', newValue);
  }
},

在上述例子中,我们在 `data` 中声明了一个变量 `variableToWatch`,并在 `watch` 选项中监听了它的变化。当 `variableToWatch` 的值发生变化时,相应的 `watch` 函数将被触发。
```

如果你希望在组件加载后就立即监听该变量,你可以在 `created` 生命周期钩子中手动调用一次 `watch` 函数:

```javascript

created() {
  this.$watch('variableToWatch', (newValue) => {
    console.log('变量的值变为:', newValue);
  });
}

这样,在组件创建后,`variableToWatch` 的初始值也会被监视。
```

你可能感兴趣的:(vue.js,前端,javascript)