Как отключить доступное время зацикливания массива с помощью watch? - PullRequest
Новая
       76

Как отключить доступное время зацикливания массива с помощью watch?

0 голосов
/ 14 мая 2019

Я создаю заявку на бронирование в 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 и т. Д.

Но получается, что он принимает последнюю дату, указанную в массиве, и отключает только часы.

1 Ответ

0 голосов
/ 14 мая 2019

Код, который вы разместили, всегда будет проходить по всем записям в testArray и предпринимать некоторые действия для каждой записи.Я думаю, что вы хотите, чтобы код выполнял действие только для соответствующей записи, и по умолчанию, если ни одна запись не соответствует.Есть много способов добиться такого поведения, но одним из них является следующее 

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