v-calendar 问题，如何根据对象数组列表中的日期禁用日期

Question

我刚开始写代码，现在我们在 airbnb 项目中使用 v-calendar.io，我们需要在后端根据房源的不可用日期数组列表禁用日期。

<v-date-picker
  class="date-picker"
  v-model="date"
  :disabled-dates="[new Date(2021, 9, 10)]"
  color="blue"
  is-range
/>

因此，将日期放入 :disabled-dates 是可行的，但是我如何才能使其基于数组列表而不是硬编码的预设日期运行？（我已经学会了如何从后端获取数据，但我不知道如何编码，所以 :disabled-dates 获取这些信息）

Answer 1

将日期数组放入 Vue 组件数据中：

data: () => ({
   disabledDays: [] // later populated from API call
})

那么你可以这样做：

<v-date-picker
  class="date-picker"
  v-model="date"
  :disabled-dates="disabledDays" /*not hardcoded*/
  color="blue"
  is-range
/>

从后端收到日期字符串后，您可以将它们转换为日期对象，例如：

this.disabledDays = response.disabledDates.map(string => new Date(string))`

Answer 2

我想出了一个片段来向您展示更简单的事情。我在 mounted 中放了一个 setTimeout 来模拟来自服务器的请求，1 秒后，响应将来自服务器并用日期对象填充 disable_dates。

我使用了最简单的方法将字符串映射到日期对象，你也可以使用map或普通的for来实现这个目标。

new Vue({
  el: '#app',
  data: {
    date: null,
    disable_dates: [],

  },
  mounted() {
    setTimeout(() => {
      let string_dates_from_srver = ['2021-05-05', '2021-05-08']
      string_dates_from_srver.forEach((item) => {
        this.disable_dates.push(new Date(item))
      })
    }, 1000)
  }
})

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<link href="https://unpkg.com/v-calendar@2.3.0/lib/v-calendar.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/v-calendar@2.3.0/lib/v-calendar.umd.min.js"></script>
<div id='app'>

  <v-date-picker class="date-picker" v-model="date" :disabled-dates="disable_dates" color="blue" is-range></v-date-picker>

  {{date}}
</div>

v-calendar 问题，如何根据对象数组列表中的日期禁用日期

v-calendar question, how to disable dates based on dates in an object's arraylist

javascript

vue.js

calendar

vuex

vcalendar