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

我用Vue编写了一个简单的日历。月份中的天数通过使用v形箭头显示，v形箭头创建了一个$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");
                }
            }

这里是该项目的链接。

---

您面临的问题来自于通过

$refs

使用DOM元素来存储 选定日期

我鼓励您从这种类型的逻辑（我称之为jQuery逻辑，通常会导致复杂的DOM操作，即使在像您这样的简单情况下），转向SPA特有的逻辑，在SPA中，您使用虚拟模型（通常称为

vm

）作为真相的来源1

回到组件，我将把它存储为一个数组，有3个元素：

[日、月、年]

2

要将其传递到渲染层，应使用以下方法：

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>

{{date}

我已经在您的示例中实现了这一点。
注意：我还简化了

highlightDay（）

方法。我只需将

selectedDay

设置为前面提到的数组，或者如果它们相等，则取消设置它（通过单击所选数组启用取消选择）

---

[1]-请注意，在更复杂的情况下，需要在应用程序组件之间共享真相的来源，Vue提供了一个专门的数据管理模块，称为Vuex（但我们这里不使用）

---

[2]-为了清理观察者的数据（Vue用来监听突变），我将数组存储在

selectedDay

中，作为JSON字符串。

您将类应用到第n天，而不保存月份。相反，将日期和月份存储在

vm

中，并基于将日期和月份与

vm

中设置的日期进行比较的方法应用

selected day

类（即：

class=“{'selected-day'：isSelected（day）}”

）我还要补充一点，您应该尽量避免使用$refs和getElementById直接访问dom。@AndreiGheorghiu感谢您的指导。我理解你说的我需要做的，我只是不知道该怎么做。我可以得到所选项目的日期和月份，但我不太确定我将它们与什么进行比较。你能再解释一下吗？哇，简单多了。我重新阅读了Vue文档和一篇关于直接通过

$refs

访问DOM的文章，但直到看到您的解决方案投入使用，它才真正开始运行。谢谢你，朋友。