Разрешено ли использовать dateDate для async или ajax на vuetify? - PullRequest
Новая
       84

Разрешено ли использовать dateDate для async или ajax на vuetify?

1 голос
/ 15 октября 2019

Я хочу спросить 

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
    }
},

это асинхронно без остановки

разрешено. Дата не может использоваться для асинхронности или 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
        })
    }
},

Не работает, отключается вся дата

, поэтому, если вы используете axios, он невыполнить оператор в ответе

Это ошибка в указателе даты vuetify?

Или посмотрите на это: https://codepen.io/positivethinking639/pen/mddPjKZ?editors=1010

Дата должна быть 2019-10-17

включен потому что он в axios, он не работает

1 Ответ

1 голос
/ 15 октября 2019

Вы можете использовать созданный хук, чтобы добавить свою синхронную функцию, а затем активировать функцию allowDates для обновления указателя даты

Найдите код ниже: 

    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

...