Vuetify中如何让list-group的active-class作用于整个列表组而非仅头部

方案1：给整个v-list-group绑定动态类（最直接，推荐） #

v-list-group的active-class属性默认仅作用于头部节点，你可以直接通过当前控制展开状态的item.marker变量，给组件根节点绑定动态类，让类名覆盖整个列表组容器：

<v-list>
  <v-list-group
    v-for="item in items"
    :key="item.title"
    <!-- 把原来的class和动态判断的selected类合并 -->
    :class="[ 'my-1 mx-2 primary--text', { 'selected': item.marker } ]"
    color="#F5F5F5"
    no-action
    outlined
    <!-- 删掉原来的active-class配置 -->
    :append-icon="item.marker ? 'mdi-minus' : 'mdi-plus'"
    @click="item.marker = !item.marker"
  >
  <!-- 你的子内容代码 -->
  </v-list-group>
</v-list>

此时你的selected类会挂载到整个列表组的根节点，你写的绿色边框样式可以直接作用于整个容器，包含展开的子内容区域。如果你的选中逻辑和展开状态无关，只需要把item.marker替换为你自己的选中判断条件即可。

方案2：CSS适配（不想改模板时可选） #

如果不想修改组件配置，可以直接调整你的selected类的CSS规则，同步给关联的子内容容器加样式：

/* 原头部样式保留 */
.selected {
  border: 1px solid green;
  border-bottom: none;
}
/* 给展开的子内容区域加同样式边框 */
.selected + .v-list-group__items {
  border: 1px solid green;
  border-top: none;
}

如果是Vuetify 3版本，可通过开发者工具检查子内容容器的类名，微调上述选择器即可生效。

内容的提问来源于stack exchange，提问作者Jérôme BORGA