Laravel的Buefy datepicker:预期日期,得到了String

问题描述 投票:0回答:1

我有一个表单,该表单由从我的后端的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:

enter image description here

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

laravel vue.js buefy
1个回答
1
投票

终于想通了。

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

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

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

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

enter image description here

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.