我有一个表单,其中填充了从 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 的方式:
知道如何克服这个问题吗?预先感谢您。
最佳答案
我刚刚在 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
关于laravel - Buefy datepicker 与 Laravel : Expected Date, 得到字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54583182/