javascript - 当我们通过按钮添加时，禁用的日期不会在 View 上更新

Question

我使用了 vue-hotel-date-picker 它工作正常。问题是当使用禁用日期 Prop 时，它在初始化和更新日历时第一次禁用日期。但是当我在任何按钮单击事件上更新禁用日期数组时，它会更新禁用日期数组，但不会在 View 组件中反射(reflect)或呈现。我已经通过 vuejs chrome 扩展进行了调试。

这是调试时的图像

插件link

这是我的HTML代码

<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>

我不知道如何找出并解决这个问题，这可能是这个插件的问题，任何帮助将不胜感激!

Answer 1

写入compute: { }，一旦有变化就会更新。

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");
    }
  }
};