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

Posted 2023-02-22

【中文标题】如何禁用使用手表循环遍历数组的可用时间？

【英文标题】：How to disable available times looping through an array using watch?

【发布时间】：2019-10-01 14:40:06

【问题描述】：

我正在 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】：

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

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

【讨论】：

谢谢您的好心先生！像魅力一样工作，看起来也很干净