v-module 질문, 개체 어레이 목록의 날짜를 기준으로 날짜를 사용하지 않도록 설정하는 방법

v-module 질문, 개체 어레이 목록의 날짜를 기준으로 날짜를 사용하지 않도록 설정하는 방법

코드화를 시작한 지 얼마 되지 않아 현재 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가 이러한 정보를 취득합니다).

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

간단한 걸 보여드리기 위해 제가 조각을 하나 만들었어요.제가 넣었어요setTimeout에mounted서버로부터의 요구를 시뮬레이트 해, 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>

언급URL : https://stackoverflow.com/questions/67438276/v-calendar-question-how-to-disable-dates-based-on-dates-in-an-objects-arraylis