Bug Report: Attributes Double on Change

[snakysnake]

Hey! I upgraded my v-calendar some time ago and am having an issue (currently on v.3.0.3.):

When I am changing the date somehow my attributes are (pretty sure internally, inside the v-calendar, not my vue app) duplicated. So every time I change date my attributes double and of course this is not intended. On the old version of v-calendar it was working perfectly fine, so the issue has 100% arisen because of the update.

I really want to thank you all for the awesome software, would be cool if this bug could be duplicated and fixed, I will include a snippet of my code so you may be able to replicate the behaviour. If you have any questions, please feel free to ask me, I will answer asap (although I do sleep, sometimes at least ...)

<template>
  <div>
    <label
      for="calendar"
      class="block mb-2 text-sm font-medium text-gray-900"
    >Wählen Sie Ihren Wunschtermin</label>
    <div class="px-1 sm:px-10">
      <v-date-picker
        id="calendar"
        v-model="date"
        color="green"
        is24hr
        expanded
        :first-day-of-week="2"
        :minute-increment="60"
        :min-date="new Date()"
        :attributes="calendarAttributes"
        :disabled-dates="calendarAttributes[0].dates"
      />
    </div>
  </div>
</template>

I wish I could also just copy and paste the script part 1 by 1 but it's sort of complicated and a pain in the a** :)

So I'll try to break down what it does, like what's relevant to v-calendar...

  data() {
    return {
      date: new Date(),
      calendarAttributes: [
        {
          dates: [],
          dot: "red",
          popover: {
            label: "Online not available",
          },
        },
      ],
    };
  },

I have set up a watcher (deep watcher, yes) for calendarAttributes and I can see it somehow being updated internally, even though the values don't change. I have no idea why to be honest, I feel like it has to be from the v-date-picker component. Because I only have one mutation inside my component and it just does not trigger, I checked.

[snakysnake]

Okay I found out what the issue is... It has nothing to do with my attributes, the issue was the min-date attribute, and the hardcoded new Date inside of it. I now just create the new Date when the component is loading and save it inside a variable, then the issue disappears. So

I will close this issue with the comment, thanks for the amazing development!

[snakysnake]

I got this issue again and now even when I am doing it the right way it's appearing

[snakysnake]

Basically i am changing the attributes many times while the calendar is being used and for some reason it's always re-doing the min-date stuff... I can't rewrite my code to do it differently because it's needed for efficiency

[snakysnake]

From the outside looking in...:

I am updating the disabled dates, to be specific, the dates inside the first element of the disabled-dates array. This leads to the issue. When I am recreating the whole attribute like ...

{
            dates: date,
            dot: "red",
            popover: {
              label: this.$t("ChooseDate.notAvailable"),
            },
}

then the issue disappears.

This must be less efficient as I now create a complete object like this to prevent the bug instead of having different attributes only for different "reasons".

But for anyone looking for a quickfix, just do that, if questions remain let me know.

[thepurpleblob]

I had a weird problem with :min-date="new Date()". It being there seems to cause the event update:pages to trigger twice. axios loads the attributes from a CMS, so the update:pages (expected) triggers after the attributes are loaded but it immediately fires again with no change to anything. The factor that makes the difference is :min-date="new Date()", unsure why.