使用新事件刷新 Vuetify V-Calendar 隐藏 "Month" 视图中的事件

Question

目前正在使用 Vuetify 在 Vue.js 中使用 C# API 开发 appointment-making 应用程序，我遇到了组件 V-Calendar 我无法理解的行为。当最初向日历提供事件时（通过联系 API 从数据库中检索的约会），这些事件正确显示如下： Original calendar loading

查询最初忽略了已取消的约会。但是，我提供了在日历 header 中使用复选框包含它们的选项。选中该框会通过观察者自动刷新事件列表。这样做时，日历会出现奇怪的行为，不再显示事件。这只发生在“月”视图中，“日”和“周”视图正确显示数据。 Result of refreshing the calendar

这是我的日历的定义（法语编程，翻译成英文 variables/methods 为了您更容易理解）

<v-calendar ref="calendar"
                        v-model="focus"
                        :event-color="getEventColor"
                        :events="events"
                        :first-interval="13"
                        :interval-count="22"
                        :interval-format="intervalFormat"
                        :interval-minutes="30"
                        :type="type"
                        :weekdays="weekDays"
                        color="primary"
                        event-more-text="Show more"
                        event-overlap-mode="column"
                        locale="fr"
                        @change="updateRange"
                        @click:event="showEvent"
                        @click:more="viewDay"
                        @click:date="viewDay">
              <template #event="event">
                <div v-if="event.eventParsed.input.idEtat === etats.annule"><s><i>{{
                    event.eventParsed.input.name
                  }}</i></s></div>
                <div>{{ event.eventParsed.input.name }}</div>
              </template>
            </v-calendar>

updateRange方法的定义（在created()钩子中加载页面时调用一次）

async updateRange({start, end}) {
  this.currentDateDebut = start.date;
  this.currentDateFin = end.date;
  await this.refreshCalendarData();
}

refreshCalendar 方法的定义

异步刷新日历数据（）{ this.loading = 真；

  const events = []
  //Récupération des rendez-vous
  await this.getRendezVous(this.currentDateDebut, this.currentDateFin);
  this.rendezVous = await this.$store.getters["rendezVous/getRendezVousData"];
    for (let i = 0; i < this.rendezVous.length; i++) {
      const calculImcPossible = (this.rendezVous[i].taille != null && this.rendezVous[i].taille > 0) &&
            (this.rendezVous[i].poids != null && this.rendezVous[i].poids > 0);
        const calculImc = calculImcPossible
            ? (Math.round(this.rendezVous[i].poids / ((this.rendezVous[i].taille / 100) * (this.rendezVous[i].taille / 100)) * 100) / 100).toFixed(2)
            : null;
        const libelleImc = this.getLibelleImc(calculImc);
        events.push({
          id: this.rendezVous[i].id,
          idInstitution: this.rendezVous[i].idInstitution,
          name: this.heureCourte(this.rendezVous[i].date) + " | Appointment",
          start: new Date(this.rendezVous[i].date),
          end: new Date(new Date(this.rendezVous[i].date).getTime() + 15 * 60000),
          color: this.rendezVous[i].institution.color,
          timed: true,
          taille: this.rendezVous[i].taille != null && this.rendezVous[i].taille > 0
              ? this.rendezVous[i].taille + "cm"
              : "indéfinie",
          poids: this.rendezVous[i].poids != null && this.rendezVous[i].poids > 0
              ? this.rendezVous[i].poids + "kg"
              : "indéfini",
          sexe: this.rendezVous[i].patient.sexe,
          imc: calculImc != null ? (calculImc + " (" + libelleImc + ")") : "non-déterminé",
          nom: this.rendezVous[i].patient.nom + " " + this.rendezVous[i].patient.prenom,
          telephone: this.rendezVous[i].patient.telephone != null ? this.rendezVous[i].patient.telephone : "-",
          email: this.rendezVous[i].patient.email != null ? this.rendezVous[i].patient.email : "-",
          commentaire: this.rendezVous[i].commentaire,
          regime: this.rendezVous[i].regime,
          hospitalisation: this.rendezVous[i].hospitalisation,
          contagieux: this.rendezVous[i].contagieux,
          incontinent: this.rendezVous[i].incontinent,
          naissance: this.dateCourte(this.rendezVous[i].patient.naissance),
          diabete: this.rendezVous[i].diabete.type,
          examen: this.rendezVous[i].examen.nom,
          idEtat: this.rendezVous[i].idEtat,
          idPatient: this.rendezVous[i].idPatient,
          typeEvent: "rendez-vous",
          editable: this.rendezVous[i].editable
        });
    }
}

最后，观察者 showCancalledAppointments 的定义

async showCancelledAppointments() {
  await this.refreshCalendarData();
}

您知道为什么日历会显示这种行为吗？感谢您的宝贵时间和帮助。

Answer 1

使用命令 'npm update' 更新解决方案解决了问题。最新版本的 Vuetify 似乎解决了这个问题

使用新事件刷新 Vuetify V-Calendar 隐藏 "Month" 视图中的事件

Refreshing Vuetify V-Calendar with new events hide the events in the "Month" view

vue.js

vuetify.js