Vue.js 3+Vuetify导航抽屉导航项类绑定问题排查

类绑定的核心错误 #

你当前的:class绑定写法存在两个关键问题：

• 动态类名未用方括号包裹：在Vue的对象语法绑定中，若类名是动态变量（比如section.class），必须用[ ]包裹，否则Vue会将section.class当作字符串字面量的类名，而不是读取section对象里的class属性值。
• 缺少false状态的样式切换逻辑：当前仅定义了groupcss为true时应用类，没有处理false时的样式切换规则，无法实现你需要的“条件为false时切换样式”的需求。

修正后的绑定写法 #

场景1：切换group-item类的有无 #

如果你的需求是groupcss为true时应用group-item样式，为false时移除该样式，修正后的绑定代码如下：

<v-list-item 
  v-bind="props" 
  :append-icon="null" 
  class="mb-2" 
  :class=" { [section.class]: groupcss } " 
  :slim="true"
>

这里用[section.class]告诉Vue要动态读取section对象的class属性值作为类名，当groupcss为true时添加该类，false时移除。

场景2：在两个类之间切换 #

如果需要groupcss为true时用group-item，为false时切换到另一个类（比如group-item-inactive），可以调整为数组语法结合对象语法：

<v-list-item 
  v-bind="props" 
  :append-icon="null" 
  class="mb-2" 
  :class=" [groupcss ? section.class : 'group-item-inactive'] " 
  :slim="true"
>

或者用对象语法同时定义两个类的条件：

<v-list-item 
  v-bind="props" 
  :append-icon="null" 
  class="mb-2" 
  :class=" { 
    [section.class]: groupcss,
    'group-item-inactive': !groupcss 
  } " 
  :slim="true"
>

对应的你需要添加group-item-inactive的CSS样式：

.group-item-inactive {
  background-color: #fff;
  color: #333;
  text-transform: capitalize !important;
}

额外提示 #

如果你的groupcss需要针对每个section单独控制（比如点击不同组切换各自的样式），建议将groupcss改为对象类型，记录每个section的激活状态，比如：

const groupcss = ref({
  General: true,
  System: false,
  Reboot: false
})

// 点击事件中更新状态
const handleItemClick = (groupName) => {
  // 切换当前组的状态，或者实现单选逻辑
  groupcss.value[groupName] = !groupcss.value[groupName]
}

此时模板中的绑定要改为对应组的状态：

:class=" { [section.class]: groupcss[section.group] } "

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