如何在Vue.js中实现date输入框与number输入框的双向同步

根因分析 #

HTML原生date类型输入框及Vuetify封装的v-text-field type="date"仅识别YYYY-MM-DD格式的字符串作为合法输入值。修改年龄计算出生日期时，如果直接将Date对象、MM/DD/YYYY等其他格式的字符串赋值给绑定变量，会导致输入框无法识别值，fallback到占位符状态。调试时看到绑定属性值打印正常，是因为Date对象序列化或默认toString的输出看起来符合预期，但并不满足输入框的格式要求。

修复方案 #

1. 统一出生日期的赋值格式
   修改年龄联动计算出生日期的逻辑，将计算得到的Date对象手动格式化为YYYY-MM-DD格式的字符串再赋值给绑定变量，示例代码如下：

// age为用户输入的年龄值
const calculateBirthDate = (age) => {
  const now = new Date()
  const targetDate = new Date(now.getFullYear() - age, now.getMonth(), now.getDate())
  // 格式化处理：月、日不足两位补前导0
  const year = targetDate.getFullYear()
  const month = String(targetDate.getMonth() + 1).padStart(2, '0')
  const day = String(targetDate.getDate()).padStart(2, '0')
  // 赋值给v-model绑定的变量
  this.birthDate = `${year}-${month}-${day}`
}

2. 强制组件刷新（可选）
   如果修改格式后仍然存在更新不触发的问题，可以给v-text-field新增key属性绑定日期值，强制组件在值变化时重绘：

<v-text-field
  type="date"
  v-model="birthDate"
  :key="birthDate"
  label="出生日期"
></v-text-field>

内容的提问来源于stack exchange，提问作者JasonWilczak