如何在Vuetify 3中正确全局配置VTextField的hide-details属性？

不需要转义连字符，而是要将带连字符的属性名用字符串引号包裹即可解决这个语法错误。

在JavaScript/TypeScript中，对象属性名如果包含连字符这类非标准标识符字符，不能直接以hide-details: true的形式定义——这种写法会被解析器误认为是hide - details（减法表达式），从而抛出语法错误。

正确的全局配置代码示例 #

// vuetify.ts
import { createVuetify } from 'vuetify'

export default createVuetify({
  defaults: {
    VTextField: {
      density: 'compact',
      variant: 'outlined',
      color: 'primary',
      'hide-details': true // 用单引号/双引号包裹带连字符的属性名
    }
  }
})

关键说明 #

• 对于density、variant这类符合标识符规则的属性名，可直接使用无引号写法；
• 对于hide-details这类含特殊字符的属性，必须用字符串字面量形式定义属性名，TypeScript才能正确识别为单一属性。

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