Лучшая практика для обработки дат между MySQL и V-Calendar с помощью v-date-picker

Question

Я использую V-Calendar v-date-picker, чтобы выбрать одну дату, которая будет сохранена в поле даты в mySQL.Я пытаюсь выяснить лучшую практику для обработки дат между двумя.

В документации по v-date-picker сказано, что я могу использовать v-model, что говорит о том, что я могу привязать дату из своей записи базы данных (обработанной в vuex) прямо к средству выбора даты.Эта дата доставляется в формате 2019-09-15.Когда я пытаюсь это сделать, v-date-picker просто игнорирует его, и дата не выбрана.В документации указано, что лучше использовать собственный объект даты в JavaScript, поэтому я пытаюсь его создать.Если я делаю это вручную со статически введенной датой, дата выбирается на сборщике, но я не могу найти хороший способ получить дату из базы данных для применения к сборщику.Я могу использовать метод для создания объекта даты JS, но я не могу получить дату из бэкэнда в сборщик.Если я использую метод js convert, который я создал в v-модели, он выдает ошибку «неожиданный токен».

Я использую Laravel и даже пытался преобразовать дату в серверной части в dateзначения компонентов, но это тоже не сработало.

<v-date-picker mode='single' v-if="schedule" v-model='schedule.start_at' :formats='formats' is-inline show-caps></v-date-picker>

Между прочим, я использую Laravel на бэкэнде и vuex для управления состоянием.

Моя функция convertDate:

convertDate(dt) {
  return new Date(dt)
},

ОБНОВЛЕНИЕ Я создал промежуточную переменную в хранилище vuex, и когда я загружаю запись базы данных, я преобразую дату в объект даты JavaScript, и теперь она правильно отображается в компоненте.

SET_SCHED_DATE : (state,payload) => {
  state.sched_date = new Date(payload)
},

Однако, когда я пытаюсь щелкнуть другую дату в v-date-picker, он выбирает предыдущий день.Я смотрю на инспектора Vue и значение имеет GMT -4.Я предполагаю, что это проблема несоответствия UTC, но я не уверен, как решить.Я попытался преобразовать свою дату в UTC в магазине vuex с помощью приведенного ниже кода, но я получаю ошибку несоответствия типов (я использую v-calendar версии 0.9.7).Я даже пытался обновить до версии 1 (в бета-версии), но, похоже, не установить необходимые CSS, что создает другие проблемы!

state.sched_date = new Date().toISOString()

Answer 1

После долгих проб и ошибок я разобрался.Я обновился до версии v-calendar 1.0.0-beta.19.Я все еще использую промежуточную переменную в vuex с именем sched_date.

Я использую Ресурс Laravel и перед отправкой данных через API я разбиваю дату на значения компонента даты, используя Carbon:

$carbondate = Carbon::createFromFormat('Y-m-d', $this->start_at, 'America/Los_Angeles');
'sched_date' => $carbondate->format('Y') . ', ' . $carbondate->format('m') . ', ' . $carbondate->format('d'),

Я загружаю свои данные расписания с помощью действия vuex, а затем присваиваю значение из базы данных sched_date, используя мутацию.

GET_SCHEDULE : async ({ state, commit }, schedule_id) => {
  let { data } = await axios.get('/api/schedules/'+schedule_id)
  commit('SET_SCHEDULE', data.data)
  commit('SET_SCHED_DATE', data.data.sched_date)
},

SET_SCHED_DATE : (state,payload) => {
  state.sched_date = new Date(payload)
},

Далее выбираем v-date в vuetemplate:

<v-date-picker mode='single' v-if="schedule" v-model="sched_date" is-inline show-caps></v-date-picker>

И, наконец, в методе сохранения я конвертирую дату в дружественную для MySQL версию:

save() {
  var payload = { params: { id: this.schedule.id },  data: { 'start_at': this.$moment(this.sched_date).format("YYYY-MM-DD") } }
  this.$store.dispatch('schedules/SAVE_SCHEDULE', payload).then(() => {
    Vue.toasted.show( 'Saved!', { type: 'success', duration: 5000 });
  });
},

Я опущил действие сохранения vuex для краткости.