将反应对象添加到我的 Vue 组件数组

Question

我正在尝试让我的 Vue 组件处理具有日期和布尔属性的可变长度对象列表。

列表是员工休假天数列表。我想添加假期并将它们标记为每年重复。

<template>
  <div>
    <b-row v-for="vacation in employee.vacations" :key="vacation.id">
      <b-col>
        <b-input type="date" v-model="vacation.date"></b-input>
      </b-col>
      <b-col>
        <b-form-checkbox :v-model="vacation.yearlyRepetition">
          Jährlich wiederholend
        </b-form-checkbox>
      </b-col>
    </b-row>

    <b-button @click="addVacation">
      <b-icon-plus />
    </b-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employee: this.value,
    };
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          vacations: [
            {
              id: "vac-1",
              date: "2022-12-23",
              yearlyRepetition: true,
            },
          ],
        };
      },
    },
  },
  methods: {
    addVacation() {
      this.employee.vacations.push({
        id: "vac-2",
        date: "2022-12-24",
        yearlyRepetition: false,
      });
    },
  },
};
</script>

我的问题是，由于某种原因单击第二个复选框时，第一个复选框的值发生变化。

这可能是一些错误的连接组合

• 道具
• 反应对象
• 列表渲染

我该怎么做才能解决这个问题？

---

我试过使用

this.$set

，但我不太明白，似乎没有任何效果。 当记录组件的数据时，所有值似乎都设置正确，但是当我只记录假期时，我意识到数组中最初（第一个）假期是一个观察者，第二个是一个常规对象.我不明白其中的区别...