如何使用计算属性watch来控制点击checkbox往一个addChuZhenForm数组里面放对象与精确删除对象!

案例如下:

```vue

<template>
  <div>
    <div class="signCss">
      <el-checkbox label="上午" name="signType" v-model="isCheck1"></el-checkbox>
      <el-checkbox label="下午" name="signType" v-model="isCheck2"></el-checkbox>
    </div>
    <p>addChuZhenForm数组内容:{
   
   { JSON.stringify(addChuZhenForm) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //其余表单绑定的值
      department_id: null,
      room_id: null,
      doctor_id: null,
      inquiry_time: null,
      quantity: "",

      isCheck1: false,
      isCheck2: false,
      addChuZhenForm: []
    };
  },
  methods: {
    updateAddChuZhenForm(sign, isChecked) {
      const existingIndex = this.addChuZhenForm.findIndex(obj => obj.sign === sign);
      
      if (isChecked) {
        if (existingIndex === -1) {
          this.addChuZhenForm.push({
            department_id: this.department_id,
            room_id: this.room_id,
            doctor_id: this.doctor_id,
            inquiry_time: this.inquiry_time,
            quantity: this.quantity,
            sign: sign
          });
        }
      } else {
        if (existingIndex !== -1) {
          this.addChuZhenForm.splice(existingIndex, 1);
        }
      }
    }
  },
  watch: {
    isCheck1(newValue) {
      //添加或删除上午的记录
      this.updateAddChuZhenForm("上午", newValue);
    },
    isCheck2(newValue) {
      //添加或删除下午的记录
      this.updateAddChuZhenForm("下午", newValue);
    }
  }
};
</script>


```

splice() 是 JavaScript 数组的一个方法,用于修改数组的内容,包括删除、插入和替换元素。它可以在指定的位置从数组中添加或删除元素,并返回被删除的元素(如果有的话)。splice() 方法接受多个参数,包括要删除的元素的数量、要插入的元素以及插入的位置。

push() 是 JavaScript 数组的一个方法,用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度。

在这个示例中,我使用了一个数组 `addChuZhenForm` 来存储选中的对象。每当选中状态发生变化时,`updateAddChuZhenForm` 方法会检查数组中是否已存在具有相同 `sign` 标识的对象。如果存在,它会更新对象的选中状态;如果不存在,它会添加一个新对象。如果取消选中,它会在数组中查找并删除相应的对象。

确保你的实际数据结构和操作与此示例相匹配。在实际情况下,你可能需要根据标识符等更精确地查找和删除对象。

猜你喜欢

转载自blog.csdn.net/qq_58647634/article/details/132190099
今日推荐