如何在 vue.js 中使用 v-calendar 范圍設置要選擇的最大天數？

Question

使用 vuejs vcalendar range ，我想限制用戶可以選擇的天數。 你知道有某種“maxDays”選項嗎？ 我還嘗試創建一種方法，當范圍大於特定天數時，修改結束日期以適應最大范圍。 我在這里發現的問題是日歷沒有更新，即使日期對象是。

假設我的模板中有以下日歷：

<v-date-picker v-model="range" is-range />

其中“范圍”是：

data() {
    return {
      range: {
        start: new Date(),
        end: new Date(),
      },
    };
  }

我有一種方法可以檢查范圍是否有效。 如果它無效（即當它太大時），則修改結束日期：

if (!this.validRange) {
        let startDate = this.range.start;
        let endDate = new Date();
        endDate.setDate(startDate.getDate() + 6);
        this.$set(this.range, "end", endDate);
      }

正如我所說，值 range.end 正確更改，但日歷仍然顯示相同的范圍而不更新 range.end 值。

有沒有辦法解決這個問題？ 而且我知道其他圖書館可以做這些事情，我只想知道 v-calendar 是否可行。 非常感謝你的幫助！

於連

Answer 1

這是一個小提琴： https : //jsfiddle.net/3vz9gy0d/2/

HTML：

  <v-date-picker
          v-model="range"
          is-range
          @input="handle_input()"
        />
</div>

JS：

new Vue({
  el: '#app',
  data() {
    return {
      range: {
        start: new Date(),
        end: new Date().setDate(new Date().getDate() + 1),
      }
  }},
  
  methods:{
        handle_input(){
        this.$nextTick(() => {
        this.range = {
          start: this.range.start,
          end: new Date().setDate(this.range.start.getDate() + 6),
          };
        });
      }
    }
})

創建新對象時，范圍似乎是被動的。 偵聽輸入事件然后更新范圍似乎可以完成這項工作。