如何使用手表禁用遍历数组的可用时间？

Question

我正在 Vue CLI 中创建一个预订应用程序。我决定使用 vue-ctk-date-time-picker 来选择日期和时间。我打算根据日期停用一些时间，但我运行有问题。我的代码只禁用数组中指定的最后一个日期的时间并忽略其余时间。

我已经根据日期将时间数组记录到控制台，它打印出正确的值。除了那个控制台没有显示任何错误。

<VueCtkDateTimePicker only-date v-model="date"/>
<VueCtkDateTimePicker only-time :disabled-hours="disabledHours"/>
date: null,
disabledHours: [],
testArray: [
  {
    date: "2019-05-28",
    times: ["10", "11"]
  },
  {
    date: "2019-05-29",
    times: ["10", "11", "12"]
  }
]

watch: {
  date(newVal, oldVal) {
    for (let i = 0; i < this.testArray.length; i++) {
      if (newVal == this.testArray[i].date) {
        for (let j = 0; j < this.testArray[i].times.length; j++) {
          this.disabledHours.push(this.testArray[i].times[j]);
        }
      } else {
        this.defaultHours();
      }
    }
  }
},
created() {
  this.defaultHours();
}

defaultHours() {
  this.disabledHours = ["00","01","02","03"]
}

如果日期是 "2019-05-28"，那么我预计禁用时间为 10 点和 11 点。如果日期是 "2019-05-29"，那么我希望禁用时间为 10、11 和 12 等

但是发生的事情是，它采用数组中指定的最后一个日期并且只禁用它的小时数。

Answer 1

您发布的代码将始终遍历 testArray 中的所有条目并对每个条目采取一些操作。我认为你想要的行为是让代码只对匹配的条目采取行动，如果没有条目匹配则默认。有很多方法可以实现这种行为，但一种方法如下

date(newValue) {
    const matched = testArray.find(entry => entry.date === newValue);
    if (matched) {
        this.disabledHours = matched.times;
    } else {
        this.defaultHours();
    }
}

如何使用手表禁用遍历数组的可用时间？

How to disable available times looping through an array using watch?

javascript

arrays

for-loop

vue.js

watch