Vuetify V-Text-field(type=date) Safari初始状态异常问题求助

云原生阿岚

2026-6-24

Vuetify V-TextField Date类型 Safari自动填充今日日期问题解决方案

针对V-TextField设置type="date"后，在Safari中初始值设为""仍自动显示今日日期的问题，以下是几个可行的解决思路：

用null代替空字符串作为初始值
Safari的原生日期输入框对空字符串的处理逻辑和其他浏览器不同，会自动填充当前日期。将初始值设为null可以触发组件的无值状态，避免原生默认行为：
```
data() {
  return {
    sell_act_at: null // 替换原有的""
  }
}
```
添加autocomplete="off"并强制绑定null值
给组件加上autocomplete="off"属性阻止Safari的自动填充，同时通过:value强制将空值转为null，双重保险：
```
<v-text-field
  type="date"
  v-model="sell_act_at"
  :value="sell_act_at || null"
  autocomplete="off"
></v-text-field>
```
配合占位符控制显示状态
给组件设置placeholder=""，确保初始状态下显示空白，结合null初始值可以让界面表现完全符合预期：
```
<v-text-field
  type="date"
  v-model="sell_act_at"
  placeholder=""
></v-text-field>
```
挂载后手动重置值
如果以上方法无效，可以在组件挂载完成后，通过$nextTick手动将值重置为null，覆盖Safari的默认填充：
```
mounted() {
  this.$nextTick(() => {
    this.sell_act_at = null
  })
}
```