在 VueJS 组件中通过 :value 和 @input 链接 Date 对象答案

【问题标题】：Linking a Date object via :value and @input in a VueJS component在 VueJS 组件中通过 :value 和 @input 链接 Date 对象
【发布时间】：2020-06-17 04:13:57
【问题描述】：

我已经设法使用 :value 和 @input 而不是 this method 之后的 v-model 将日期表单输入与日期对象链接起来。它工作正常，允许我在表单输入中显示和更改日期，并将更新的日期保存在 MongoDB 中。但是，我的浏览器控制台抛出错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: _vm.item[row.key].split is not a function"

found in

---> <AppForm> at src/components/Utils/Form.vue
       <ItemDetails> at src/components/Item/ItemDetails.vue
         <App> at src/App.vue
           <Root>

设置如下：VueJS 应用程序由 NodeJS express 服务器备份，该服务器使用 Mongoose 存储数据。我的组件 ItemDetails（通过路由器视图调用）调用 Form 组件并将其“项目”作为道具传递给它。 'item' 本身是从 API 中检索出来的，并且一旦更新就会被保存回其中。

当我使用 DevTools 查看我的表单组件时，最初的 'item.dueDate' 看起来像这样：

2020-06-24T00:00:00.000Z

然后当我更改输入字段的内容时，'item.dueDate' 更改为这种格式：

Fri Jun 19 2020 12:00:00 GMT+1200 (New Zealand Standard Time)

这是我得到错误的时候。

但是，一旦我保存在数据库中（对 API 的简单 POST 调用，然后是重新获取干净更新对象的函数），item.dueDate 就会恢复到正确的格式，并具有正确更新的到期日期.所以这一切都有效。我只是想摆脱控制台错误。

这里是ItemDetails.vue。该问题涉及的“app-form”调用从第 105 行（“任务”）开始。这是Form.vue。日期输入从第 99 行开始。

感谢您的帮助！

【问题讨论】：

请在您的问题中包含相关代码

标签： javascript node.js vue.js

【解决方案1】：

您的数据 (item[row.key]) 在字符串和 Date 实例之间交替。 Date 实例没有 split() 方法，因此您的错误。

这是由于这段代码 value 需要一个字符串 (1️⃣) 而 @input 将其更改为 Date (2️⃣)

<input
  type="date"
  class="form-control form-control-sm bg-dark text-light"
  :disabled="user.role < 3"
  :value="item[row.key] && item[row.key].split('T')[0]" 1️⃣
  @input="item[row.key] = new Date($event.target.valueAsDate)" 2️⃣
/>

您应该不修改 item 属性值。这违反了 Vue 的 One-Way Data Flow 原则。相反，您应该将新日期（作为ISO 8601 字符串以保持一致性）发送给父级，即

<input
  type="date"
  ...
  @input="$emit('due-date-update', $event.target.valueAsDate?.toISOString())"
/>

在父级中

<app-form
  :item="item"
  ...
  @due-date-update="item.dueDate = $event"
></app-form>

【讨论】：