vuetify에서 allowed Date를 비동기 또는 Ajax에 사용할 수 없습니까?

vuetify에서 allowed Date를 비동기 또는 Ajax에 사용할 수 없습니까?

물어보고 싶다

methods: {
    allowedDates(date) {
        console.log(date) 
    }
},

선택한 매월 모든 날짜를 console.log합니다.

그러나 스크립트 ajax/async를 다음과 같이 추가할 경우:

methods: {
    allowedDates(date) {
        console.log(date)
        this.getData({appDate: date}); // this is async/call ajax on the vuex store
    }
},

정지하지 않고 비동기입니다.

allowedDate는 비동기 또는 Ajax에서 사용할 수 없습니까?

문서 : https://vuetifyjs.com/en/components/date-pickers#date-pickers-allowed-dates

갱신하다

나는 이렇게 확실하게 테스트해 보려고 한다.

내 코드가 다음과 같은 경우:

methods: {
    allowedDates(date) {
        if(date=='2019-10-17')
            return true
    }
},

그건 효과가 있다.사용 가능한 날짜 = 2019-10-17일뿐입니다. 해당 날짜 외에 사용 안 함

하지만 내 코드가 다음과 같다면:

methods: {
    allowedDates(date) {
        axios.get('https://myapi.com/api/schedules')
        .then(response => {
            if(date=='2019-10-17')
                return true
        })
    }
},

동작하지 않고, 모든 날짜를 무효로 합니다.

따라서 공리를 사용하면 응답에 있는 문장은 실행되지 않습니다.

날짜 선택기에 버그가 있는 건가요?

또는 https://codepen.io/positivethinking639/pen/mddPjKZ?editors=1010 를 참조해 주세요.

2019-10-17 날짜를 사용하도록 설정해야 합니다.

공리에서는 동작하지 않기 때문에

생성된 후크를 사용하여 동기 함수를 추가한 후 allowedDates 함수를 트리거하여 날짜 선택기를 업데이트할 수 있습니다.

아래에서 코드를 찾습니다.

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    date: '2019-10-15',
    availableDates: [],
    id: 5,
  }),
  methods: {
    allowedDates(a) {
      return this.availableDates.includes(a);
    },
    pickerUpdate: async function(val, id) {
      // write your async call here
       console.log('from picker update ' + val + '  id: ' + id );
      var tempDates = [];
      for(var i = 0; i < 31; i++) {
        var res = await axios.get('https://api.github.com/users/barbier')
          .then((response) => {
            // tempDates.push("2019-10-17")
          }); 
        console.log(res);
      }
      tempDates = ["2019-10-17"] // here i have hardcoded the value
      // in your case push the available dates from server response
       this.availableDates = tempDates;
      this.allowedDates();
    },
  },
})

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-date-picker
        v-model="date"
        :allowed-dates="allowedDates"
        class="mt-4"
        @update:picker-date="pickerUpdate($event, id)"
      ></v-date-picker>
    </v-row>
  </v-app>
</div>

업데이트된 코드펜:

https://codepen.io/chansv/pen/XWWdxKW?editors=1010

언급URL : https://stackoverflow.com/questions/58387320/is-alloweddate-not-usable-for-async-or-ajax-on-the-vuetify