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

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

0 голосов
/ 08 февраля 2019

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

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

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

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

Invalid prop: проверка типа завершилась неудачно для prop значения "value".Ожидаемая дата, получена строка.

Это правильно, поскольку это значение, которое я получаю от 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:

enter image description here

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

Ответы [ 2 ]

0 голосов
/ 22 августа 2019

Я только что столкнулся с этой проблемой в компоненте-обертке вокруг компонента b-datepicker Buefy.

Решение может быть получено из ответа Христосанга, который заключается в передаче начального значения, заключенного в 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

0 голосов
/ 08 февраля 2019

Наконец-то понял.

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

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

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

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

enter image description here

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

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

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

...