Vue中v-model绑定date类型input触发格式警告的解决方法

问题根源 #

你在data中定义的Date变量名与浏览器原生的Date构造函数重名了，Vue解析时误把这个变量识别成原生Date函数，而非你初始化的空字符串。这导致date输入框接收到不符合yyyy-MM-dd格式的非法值，触发格式警告；同时email输入框每输入一个字符都会触发组件更新，每次更新都会检查date输入框的值，所以警告会重复出现。

修复方法 #

把data里的Date变量名改成不与原生API冲突的名称，比如selectedDate、userDate这类自定义名称。

修改后的代码示例 #

HTML部分 #

<input type="email" v-model="Email" id="email" required />
<input type="date" v-model="selectedDate" id="myDate" required />

Vue脚本部分 #

data() {
  return {
    Email: '',
    selectedDate: '',
  };
}

效果验证 #

修改后，date输入框初始值为合法的空字符串，符合HTML5 date输入框的规范要求，不会再触发格式警告，email输入时也不会重复弹出该警告。

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