I am currently developing a booking application within Vue CLI. I have made use of vue-ctk-date-time-picker for selecting the date and time. My goal is to disable certain times based on the chosen date, but I am encountering an issue. The code I have written only disables the times for the last specified date in the array and ignores the others.
When I log the times array to the console based on the date, it shows the correct values. Additionally, there are no errors displayed in the console.
<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"]
}
If the date is "2019-05-28", then I expect the disabled hours to be 10 and 11.
If the date is "2019-05-29", then I expect the disabled hours to be 10, 11, and 12, and so forth.
However, what actually occurs is that it only takes the last date specified in the array and disables its hours exclusively.