Dynamically add disabled-dates to date picker

[JedimasterCRO]

Hi, i'm using date picker to show reservations and bookings and i'm struggling to dynamically change disabled dates and reservations on ajax response (when i select apartment i make ajax call to fetch reservations).

If i use it statically i can add reservations and disabled dates in beforeMount hook, i can't find any source if it's possible to add it dynamically?? Also, if i pass disabled dates after ajax my page is not responding... If it's not possible, is there a way to rerender datepicker on ajax update?

Thx

[newlifehaonan]

I had mostly same issue opened here https://github.com/nathanreyes/v-calendar/issues/837.

[nathanreyes]

In this case I'm guessing it is a reactivity issue. Here, getDisabledDatesFromApi simulates an asynchronous call to an api to get a fictional disabled date.

  <v-date-picker v-model="range" :disabled-dates="disabledDates" is-range />

export default {
  data() {
    return {
      range: null,
      disabledDates: [new Date(2021, 3, 1)],
    };
  },
  created() {
    this.getDisabledDatesFromApi().then(dates => {
      // All of these methods will work in Vue 2
      // this.disabledDates = dates;
      // this.disabledDates = this.disabledDates.concat(dates);
      // this.disabledDates.push(...dates);

      // This won't work in Vue 2
      this.disabledDates[0] = dates[0];
    });
  },
  methods: {
    getDisabledDatesFromApi() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([new Date(2021, 3, 15)]);
        }, 100);
      });
    },
  },
};

A code sample would help out if this doesn't fix your issue.