laravel - Buefy datepicker 与 Laravel : Expected Date, 得到字符串

Question

我有一个表单，其中填充了从 API 请求发送到后端的数据。

我正在使用 v-model 将数据绑定(bind)到字段(例如):

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

一切都很好。但是当涉及 Buefy datepicker 时，我收到以下警告:

Invalid prop: type check failed for prop "value". Expected Date, got String.

这是正确的，因为我从 Laravel 返回的值是“2019-02-01 00:00:00”。我试图使用 Buefy 属性 date-parser 将此字符串解析为日期，但没有成功:

<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 从服务器获取数据并将它们分配给 fields 对象，如下所示:

this.fields = response.data;

这是在 Vue DevTools 中查看 fields.budget_date 的方式:

知道如何克服这个问题吗？预先感谢您。

Answer 1

我刚刚在 Buefy 的 b-datepicker 组件周围的包装组件中遇到了这个问题。

解决方案可以从 christostsang 的答案中得出，即传入包装在 new Date() 中的初始值。

我的包装组件 Prop 类型如下所示:

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

您可以在此处调查默认 Prop :https://buefy.org/documentation/datepicker