Vuetify修改<v-overlay>主题时出现dark属性类型校验警告如何解决？

问题根因 #

• Vue 默认会将不带绑定语法的 attribute 值解析为字符串：无论你写的是 <v-overlay dark="false"> 还是 <v-overlay dark=false>，最终传入组件的 dark 属性值都是字符串类型的 "false"，而非你期望的布尔值。
• Vuetify 为 v-overlay 的 dark 属性声明的接收类型为布尔值，传入字符串不符合类型校验规则，因此控制台抛出对应警告。

解决方案 #

使用 Vue 的动态绑定语法 v-bind:（可简写为 :）传递属性值：

<v-overlay :dark="false">
  <!-- 登录表单内容 -->
</v-overlay>

添加 : 前缀后，Vue 会将引号内的内容作为 JavaScript 表达式解析，得到的就是布尔类型的 false，既可以正常关闭覆盖层的深色主题，也不会触发类型校验警告。

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