如何在 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),
          };
        });
      }
    }
})

创建新对象时，范围似乎是被动的。 侦听输入事件然后更新范围似乎可以完成这项工作。