Flatpickr и VueJS «self.config» ошибка при попытке setDate () - PullRequest
Новая
       91

Flatpickr и VueJS «self.config» ошибка при попытке setDate ()

1 голос
/ 04 февраля 2020

У меня проблемы с Laravel ( 5.5.46 ) + VueJS ( 2.6.10 ) + Flatpickr ( 2.4.1 ). Что я пытаюсь сделать, так это то, что при изменении поля «Дата» я хочу обновить поля «Время начала» и «Время окончания» новыми значениями.

image

Вот ошибка: 

[Vue warn]: Error in callback for watcher "value": "TypeError: self.config is undefined" found in ---> <Datetime><BookingForm><Root> admin.js:41492:15

TypeError: "self.config is undefined"
    setSelectedDate          http://localhost/js/admin.js:103661
    setDate                       http://localhost/js/admin.js:103687
    value                           http://localhost/js/admin.js:101992
    run                              http://localhost/js/admin.js:45419
    flushSchedulerQueue http://localhost/js/admin.js:45163
    nextTick                      http://localhost/js/admin.js:42847
    flushCallbacks            http://localhost/js/admin.js:42773
admin.js:42755:13​

А вот код, который вызывает ошибку (блок внутри события this.datePickerConfig.onChange): 

Vue.component("booking-form", {
  mixins: [AppForm],
  data: function () {
    return {
      form: {        
        datum: "",
        starttijd: "",
        eindtijd: "",
        tp_start: "08:00",
        tp_end: "18:00"     
      }      
    };
  },
  computed: {
    datePickerConfigAltered: function () {      
      let tConfig = {        
        noCalendar: true,
        enableTime: true,
        time_24hr: true,        
        enableSeconds: false,
        minuteIncrement: 0,        
        dateFormat: "H:i:S",
        altFormat: "H:i",
        defaultDate: "12:00",
        defaultHour: "12",
        defaultMinute: "00",
        minDate: "08:00",
        maxDate: "22:00",
      };

      var that = this;
      this.datePickerConfig.onChange = function (selectedDates, dateStr, instance) {          
        // START - Code causing VueJS errors
        let sd = flatpickr("#starttijd", tConfig);
        sd.jumpToDate();
        sd.setDate(that.form.tp_start, true, tConfig.dateFormat);

        let ed = flatpickr("#eindtijd", tConfig);
        ed.jumpToDate();
        ed.setDate(that.form.tp_end, true, tConfig.dateFormat);        
        // END - Code causing VueJS errors**
      };

      return this.datePickerConfig;
    }
  }
});

Спасибо! :)

...