VueJS Datepicker: how to dynamically disable dates?

问题

I'm implementing the vue-hotel-datepicker library into my project and I wish to dynamically add dates to the disabledDates property after making an ajax call, but my implementation does not seem to work. When I debug using the Vue devtools, I can clearly see that the disabledDates array contains my correct dates, it just does not render them as 'disabled'. It works when I hardcode those dates.

Template:

<datepicker
     :disabledDates="disabledDates" 
     :firstDayOfWeek="1"                
    >
</datepicker>

JS:

data() {
   return {
      disabledDates: this.fetchBookedDates() //contains correct data, see screenshot below
    }
},
methods: {
    fetchBookedDates() {
       window.fetch(Routing.generate('bookings'))
         .then(response => response.json())
         .then(data => this.disabledDates = data['period'])
         .catch((error) => console.log(error));
      }
}

Debugging steps: The Vue devtools shows the disabledDates from my fetch call immediately upon page load, but all dates are still enabled on my datepicker:

Hardcoded (works):

When I hardcode a couple of dates, it does display my dates as 'disabled':

data() {
   return {
     disabledDates: ['2019-02-03', '2019-02-04']
    }
}

And I get the same results in the Vue devtools as when I add them dynamically (also on page load):

What is wrong about my implementation and how should I fix this?

EDIT

The HotelDatePicker component is generated from my library, which contains the disabledDates property that I need to overwrite. This screenshot is the result from dynamically adding the disabledDates via an ajax call as explained above. After my ajax call, both components (Datepicker and HotelDatePicker) have the same disabledDates, containing the same data. But my dates are not rendered as being 'disabled' (only when I hardcode them)

回答1:

I had a quick look at the source - that component doesn't support a dynamic change of that prop.

It parses the content of the prop once, in beforeMount:

https://github.com/krystalcampioni/vue-hotel-datepicker/blob/master/src/components/DatePicker.vue#L529

And doesn't care about subsequent changes.

It could be fixed by adding a watch on that prop to call that parse method again, or turning it into a computed prop instead.

But without such a change it simply doesn't work.

edit: a hack to make it work could look like this:

<datepicker
     :disabledDates="disabledDates" 
     :firstDayOfWeek="1"
     :key="disabledDates.length"               
    >
</datepicker>

Which will force Vue to destroy and re-create the component when the length of the array changes. If yoiu change the array without changing length, it wouldn't work though with this choice of key.

回答2:

Since you are fethching them you don't need to add a property :disabledDates="disabledDates" on your tag. For the request you can use the mounted hook to send the request when the component is mounted and then to update the disabled dates when data is received:

data() {
  return {
    disabledDates: []
  }
},
mounted() {
  this.fetchBookedDates();
},
methods: {
  fetchBookedDates() {
    const that = this;

    window.fetch(Routing.generate('bookings'))
      .then(response => response.json())
      .then(data => that.disabledDates = data['period'])
      .catch((error) => console.log(error));
  }
}

来源：https://stackoverflow.com/questions/54023922/vuejs-datepicker-how-to-dynamically-disable-dates

标签

javascript

Vue.js

datepicker

vuejs2