如何实现Vuetify日期选择器并解决disabled属性类型校验报错问题

问题原因 #

该报错的核心是组件接收的disabled属性类型不匹配：组件要求该属性为布尔值，实际传入了字符串类型的"true"。

解决方法 #

• 排查你代码中所有用到disabled属性的位置：如果你的写法是disabled="true"/disabled="false"，请修改为:disabled="true"/:disabled="false"。不加冒号时引号内内容会被识别为普通字符串，加冒号才会作为JS表达式解析得到布尔值。
• 如果没有手动写disabled属性，大概率是你使用的Vuetify版本和参考的文档版本不兼容导致的属性默认值异常，你可以手动给<v-date-picker>加布尔类型的disabled绑定覆盖默认值：

<v-date-picker
  v-model="date"
  :disabled="false"
  @input="menu2 = false"
></v-date-picker>

• 也可以尝试修改<v-text-field>的readonly属性写法，避免原生属性被Vuetify识别为组件prop出现类型错误：

<v-text-field
  v-model="date"
  label="Picker without buttons"
  prepend-icon="mdi-calendar"
  :readonly="true"
  v-bind="attrs"
  v-on="on"
></v-text-field>

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