Buefy DatePicker с Laravel: ожидаемая дата, получил строку

Question

У меня есть форма, которая заполняется данными, полученными из запроса API к моему бэкэнду.

Я использую v-модель для привязки данных к полям (например):

<input type="text" v-model="fields.name">

Все работает просто отлично. Но когда дело доходит до Buefy datepicker, я получаю следующее предупреждение:

Недопустимая проп: проверка типа не выполнена для пропа "значение". Ожидаемая дата, получил строку.

Это правильно, так как это значение, которое я получаю от Laravel, это "2019-02-01 00:00:00". Я пытаюсь проанализировать эту строку для даты с помощью анализатора даты свойства Buefy, но безуспешно:

<b-datepicker
     :date-parser="(date) => new Date(Date.parse(date))"
     v-model="fields.budget_date"
     :first-day-of-week="1"
     placeholder="DD/MM/YYYY"
     name="order_date"
     editable>
</b-datepicker>

Обновить:

Это объект данных:

data() {
  return {
    csrf: document.querySelector('meta[name="csrf-token"]').content,
    fields: {},
    errors: {},
    success: false,
    loaded: true,
    loading: false,
}

Затем я использую Axios.get, чтобы получить данные с сервера и назначить их объекту полей следующим образом:

this.fields = response.data;

Вот как можно увидеть fields.budget_date в Vue DevTools:

Есть идеи как это побороть? Заранее спасибо.

Answer 1

У меня только была эта проблема в компоненте обертки вокруг Buefy's b-datepicker составная часть.

Решение может быть получено из ответа Христосанга, который должен передать начальное значение, заключенное в new Date(),

Мой тип опоры компонента-обертки выглядит так:

initialValue: {
    type: Date,
    required: false,
    default: () => undefined,
},

и это используется так:

<my-datepicker
    :initial-value="new Date(something.renews_on)"
></my-datepicker>

Я использую в основном реквизиты по умолчанию от b-datepicker, но мой компонент оболочки использует это:

<b-datepicker
    v-model="value"
    :initial-value="initialValue"
    :placeholder="placeholder"
    :name="name"
    :date-formatter="dateFormatter"
    :date-parser="dateParser"
    :date-creator="dateCreator"
    ... etc

...

dateFormatter: {
    type: Function,
    required: false,
    default: date => date.toLocaleDateString(),
},
dateParser: {
    type: Function,
    required: false,
    default: date => new Date(Date.parse(date)),
},
dateCreator: {
    type: Function,
    required: false,
    default: () => new Date(),
},

Вы можете исследовать реквизиты по умолчанию здесь: https://buefy.org/documentation/datepicker

Answer 2

Наконец-то разобрался.

Предупреждение довольно ясно: не используйте строку здесь, используйте объект Date.

Поэтому после получения ответа от сервера я проанализировал строковое значение в объекте Date и затем связал его с v-моделью:

this.fields.budget_date = new Date(this.fields.budget_date)

Так что теперь я получаю это в Vue DevTools:

Как вы можете видеть, budget_date имеет правильный формат даты, в отличие от create_at, который является строкой.

Функция парсера (: date-parser) дает вам правильный объект Date во время выбора даты пользователем.

Я хотел установить значение v-модели на основе данных, хранящихся в моей базе данных. И для работы b-datepicker должен быть объект Date, а не String.