Laravel的Buefy datepicker：预期日期，得到了String

Posted 2021-03-28

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

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

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

一切正常。但是当谈到Buefy datepicker时，我得到以下警告：

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

这是正确的，因为这是我从Laravel回来的价值是“2019-02-01 00:00:00”。我试图使用Buefy属性date-parser将此String解析为Date但没有运气：

<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>

Update:

这是数据对象：

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

然后我使用Axios.get从服务器获取数据并将它们分配给字段对象，如下所示：

this.fields = response.data;

这是如何在Vue DevTools中看到fields.budget_date：

知道怎么克服这个吗？先感谢您。

答案

终于想通了。

警告非常明确：不要在这里使用字符串，使用Date对象。

因此，在从服务器获得响应后，我将字符串值解析为Date对象，然后将其绑定到v-model：

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

所以现在我把它变成了Vue DevTools：

正如您所看到的，budget_date具有正确的日期格式，与created_at不同，后者是一个字符串。

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

我想要的是根据存储在我的数据库中的数据设置v模型值。并且要使b-datepicker工作，需要是Date对象，而不是String。