2

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

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

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

一切正常。但是当谈到Buefy 日期选择器时，我收到以下警告：

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

这是正确的，因为这是我从 Laravel 得到的值是“2019-02-01 00:00:00”。我正在尝试使用 Buefy 属性日期解析器将此字符串解析为日期，但没有运气：

<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 的方式：

在此处输入图像描述

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

4

2 回答 2

3

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

解决方案可以从 christostsang 的答案中得出，即传入包裹在new Date().

我的包装组件道具类型如下所示：

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

于 2019-08-22T17:58:20.127 回答
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。

于 2019-02-08T17:37:54.703 回答