javascript - 按元素 Id 切换日历组件中的类突出显示每个月的相同日期

Question

我用 Vue 编写了一个简单的日历。该月的天数通过使用 v-for 显示，该 v-for 创建 $refs 数组。每个日期元素还被赋予一个唯一的 ID。我想通过点击突出显示某一天，这很有效。但是，每个月的同一天也会突出显示。例如，如果我单击 5 月 25 日，每隔一个月的 25 日也会突出显示，即使我是根据该元素的 id 切换类。

如何仅突出显示所选日期？

这是突出显示方法的代码。

highlightDay(index) {
                let selected = this.$refs.day[index].id;
                if (!this.$refs.day[index].classList.contains("today")) {
                    this.$refs.day.forEach(el => {
                        if (el.classList.contains("selected-day")) {
                            el.classList.toggle("selected-day");
                        }
                    });
                    document
                        .getElementById(selected)
                        .classList.toggle("selected-day");
                }
            }

这是该项目的链接。 https://codepen.io/reticent67/pen/EzWomG

Answer 1

您面临的问题来自于使用 DOM 元素，通过 $refs 来存储您的选定的日子。

我鼓励您放弃这种类型的逻辑(我将其称为 jQuery 逻辑，通常会导致复杂的 DOM 操作，即使在简单的情况下，就像您的情况一样)，转而使用特定于 SPA 的逻辑，您在其中使用虚拟模型(通常称为 vm)作为事实来源¹。

回到您的组件，我不会将您选择的日期存储为当前渲染日期的id，而是将其存储为一个数组，包含 3 个元素:[day, Month,年] ²。

要将其传递给渲染层，您应该使用以下方法:

isSelected(index) {
  return this.selectedDay === [index, this.month, this.year];
}

日期标记包含如下内容:

<div 
  v-for="(date, date_index) in months[month].days" 
  :key="date_index" 
  :class="[{ 'selected-day': isSelected(date_index) }]">{{ date }}
</div>

我已将其实现到您的示例中 here .
请注意，我还简化了 highlightDay() 方法。我只需将 selectedDay 设置为上述数组，或者在它们相等时取消设置(通过单击选定的数组来取消选择)。

<小时/>

_{[1] - 请注意，在更复杂的情况下，需要在应用程序组件之间共享事实来源，Vue 提供了一个专门的模块用于管理数据，称为 Vuex(但我们在这里不使用它)。}

_{[2] - 为了清理观察者的数据(Vue 使用它来监听突变)，我将数组存储在 selectedDay 作为 JSON 字符串。}