如何在日期输入字段和数字输入字段之间进行双向同步？答案

【问题标题】：How to do di-directional syncing between a date input field and a number input field?如何在日期输入字段和数字输入字段之间进行双向同步？
【发布时间】：2021-12-13 22:56:05
【问题描述】：

我正在尝试在 Vue.js 中创建一个“生日”组件。我有 2 个v-text-field 组件，一个具有 type="date"，另一个具有 type="number"。

这个想法是用户要么输入出生日期，要么输入他们的年龄。如果他们输入年龄，则会更改日期输入中的内容，反之亦然。

除了我更改年龄输入外，一切都很好。它不会更新日期输入值，而是将其还原为mm/dd/yyyy。

我创建了一个代码笔here

我无法弄清楚为什么它不起作用，因为底层数据属性是正确的（我添加了一个派生文本区域以显示属性正在正确更新，您可以在下面的“出生日期”输入示例中看到.

【问题讨论】：

您的问题是关于 age 计算 和 date 计算 使用的格式之间的差异。第二个产生 YYYY-MM-DD 而第一个产生 MM/DD/YYYY。在年龄计算中使用this.birthDate = newBirthDate.toISOString().substring(0, 10) 而不是你的，或者更合适的。 `
天哪，谢谢！发布答案，我会接受:)

标签： vuejs2 vuetify.js

【解决方案1】：

您的问题是关于年龄计算和日期计算使用的格式之间的差异。第二个产生 YYYY-MM-DD，而第一个产生 MM/DD/YYYY。
试试这个

this.birthDate = newBirthDate.toISOString().substring(0, 10)

而不是你的年龄计算，或者更合适的。

【讨论】：