当我们通过按钮单击添加时，禁用日期不会在视图中更新

Question

I have used vue-hotel-date-picker its working fine. the issue is when using disabled dates props its disabled the dates first time when initializing and update on calendar.but when i update disabled dates array on any button click event it updates the disabled dates array but not reflect or render in view component. I have debug it through vuejs chrome extension.

Here is an image when debugging

plugin link

Here is my HTML Code

<div class="box">
    <h3>Check in only on saturday and minimum stay of 10 days</h3>
    <DatePicker
      DatePickerID="01"
      :disabledDates = "disabledDates"
      :enableCheckout="true"
      :minNights="10"
      :useDummyInputs="false"
       placeholder="StartDate ► EndDate"
      />
  </div>
  <button @click="onChangeDisableDates()" > Change Disable Dates </button>

JS

<script>
import DatePicker from 'components/HotelDatePicker.vue';

export default {
    components: {
        DatePicker
    },

    data () {
      return {
         disabledDates : ['2017-08-18']
      }
    },
    methods : {
      onChangeDisableDates () {
         this.disabledDates.push("2017-08-19");
      }
    }
};

</script>

I don't know how to figure out and solve this problem , it might be issue in this plugin,any help would be appreciated!

Answer 1

Write in computed: { } it will be updated then whenever there's a change.

import DatePicker from 'components/HotelDatePicker.vue';

export default {
  components: {
    DatePicker
  },
  data() {
    newDisabledDates: null
  }
  computed: {
    disabledDates() {
      // write your disable date change logic or fetch from any other data var
      if (this.newDisabledDates === null) {
        //default logic
        return {
          disabledDates: ['2017-08-18']
        }
      } else {
        // this.newDisabledDates would have been updated here if button clicked
        return {
          disabledDates: this.newDisabledDates
        }
      }
    }
  },
  methods: {
    onChangeDisableDates() {
      this.newDisabledDates.push("2017-08-19");
    }
  }
};

Answer 2

disabledDates(date) {
   var gDate = date.getDate(); 
   var gMonth = date.getMonth(); 
   var gYear = date.getYear();
   for(var i=0;i<(this.disabled.length);i++) { 
      var myarr = this.disabled[i].split("-");
        if(gDate == parseInt(myarr[2]) && gMonth == parseInt(myarr[1]) && gYear == parseInt(myarr[0])) { 
          return true;
        }
        else {
          return false;
        }
   }
}