【问题标题】：Buefy datepicker with Laravel: Expected Date, got StringBuefy datepicker with Laravel：预期日期，得到字符串
【发布时间】：2019-07-02 03:37:16
【问题描述】：

我有一个表单，该表单由从 API 请求接收到我的后端的数据填充。

我正在使用 v-model 将数据绑定到字段（例如）：

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

一切正常。但是当涉及到 Buefy datepicker 我收到以下警告：

无效的道具：道具“值”的类型检查失败。预期日期，得到字符串。

这是正确的，因为这是我从 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 的方式：

知道如何克服这个问题吗？提前谢谢你。

【问题讨论】：

我认为问题出在v-model="fields.order_date"
是不是因为字段对象不像普通的数据道具那样反应？
我没明白你的意思，请分享你的数据对象data(){...}
@BoussadjraBrahim 请查看更新。只需将 order_date 更改为 budget_date 以匹配图像。

标签： laravel vue.js buefy

【解决方案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(),
},

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

【讨论】：

【解决方案2】：

终于明白了。

警告很清楚：这里不要使用字符串，使用 Date 对象。

所以在得到服务器的响应后，我将字符串值解析成Date对象，然后绑定到v-model：

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

所以现在我把它放到 Vue DevTools 中：

如您所见，budget_date 是正确的日期格式，不像 created_at 是一个字符串。

解析器函数 (:date-parser) 在用户日期选择期间为您提供正确的 Date 对象。

我想要的是根据存储在我的数据库中的数据设置 v-model 值。要让 b-datepicker 工作，它需要是 Date 对象，而不是 String。

【讨论】：