活动时将背景颜色应用于嵌套的子组标题答案

【问题标题】：Applying background color to nested sub-group header when active活动时将背景颜色应用于嵌套的子组标题
【发布时间】：2022-08-16 09:03:28
【问题描述】：

简单的英语问题

我有一个嵌套的 v-list，如下所示：

目标是使标题 \"BusinessUnitA\" 和 \"TaskY\" 成为 highlighetd（一些背景颜色）活动时.目前，只有当我将鼠标悬停在它们上方时，它们才会突出显示。 \"Task Y\" 处于活动状态时为红色字体，但我需要将其突出显示。

代码

这是对应的html模板：

<template>
  <v-container>
    <v-list dense>
      <v-list-group
          v-for=\"businessUnit in businessUnits\"
          :key=\"businessUnit.businessUnitName\"
          v-model=\"businessUnit.active\"
          no-action
      >
        <template v-slot:activator>
          <v-list-item>
          <v-list-item-content >
            <v-list-item-title   v-text=\"businessUnit.businessUnitName\"></v-list-item-title>
          </v-list-item-content>
          </v-list-item>
        </template>
        <v-list-group
            v-for=\"item in businessUnit.tasks\"
            :key=\"item.taskName\"
            :value=\"true\"
            no-action
            sub-group
        >
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title v-text=\"item.taskName\"></v-list-item-title>
            </v-list-item-content>
          </template>
          <v-list-item-group>
            <v-list-item>
              <v-list-item-content>
                <v-row>
                  <v-col
                      class=\"d-flex\"
                      cols=\"6\"
                      sm=\"6\"
                  >
                    <v-list-item-avatar>
                      <v-img :src=\'item.responsible.avatar\'></v-img>
                    </v-list-item-avatar>

                    <v-list-item-content>
                      <v-list-item-title class=\"mb-2\" v-text=\"item.responsible.name\"></v-list-item-title>
                      <v-list-item-subtitle v-text=\"item.responsible.phone\"></v-list-item-subtitle>
                      <v-list-item-subtitle v-text=\"item.responsible.email\"></v-list-item-subtitle>
                    </v-list-item-content>
                  </v-col>
                  <v-col
                      class=\"d-flex\"
                      cols=\"6\"
                      sm=\"6\"
                  >
                    <v-list-item-avatar>
                      <v-img :src=\"item.deputy.avatar\"></v-img>
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title class=\"mb-2\" v-text=\"item.deputy.name + \' (Stv.)\'\"></v-list-item-title>
                      <v-list-item-subtitle v-text=\"item.deputy.phone\"></v-list-item-subtitle>
                      <v-list-item-subtitle v-text=\"item.deputy.email\"></v-list-item-subtitle>
                    </v-list-item-content>
                  </v-col>
                  <v-col
                      class=\"d-flex\"
                  cols=\"12\">
                  <v-divider></v-divider>
                  </v-col>
                </v-row>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list-group>
      </v-list-group>
    </v-list>
  </v-container>
</template>

和脚本部分：

<script>
export default {
  name: \"ZklListNew\",
  data: () => ({
        businessUnits: [
          {
            businessUnitName: \'BusinessUnit A\',
            municipality: \'Cityname\',
            tasks:
                [
                  {
                    taskName: \'Task Y\',
                    responsible: {
                      name: \'Max Müller\',
                      email: \'max.müller@test.mail.ch\',
                      phone: \'+44 77 123 45 67\',
                      avatar: require(\"@/assets/avatar-placeholder.gif\"),
                    },
                    deputy: {
                      name: \'Katharina Knüller\',
                      email: \'katharina.knüller@test.mail.ch\',
                      phone: \'+44 77 123 45 67\',
                      avatar: require(\"@/assets/avatar-placeholder.gif\"),
                    }
                  }]
          },
        ]
      }
  ),
}
</script>

我试过的

我尝试通过以下方式使用活动类（根据文档：https://vuetifyjs.com/en/components/list-item-groups/#examples）：

模板：

...

<template v-slot:activator>
  <v-list-item>
  <v-list-item-content >
    <v-list-item-title  active-class=\"border\" v-text=\"businessUnit.businessUnitName\"></v-list-item-title>
  </v-list-item-content>
  </v-list-item>
</template>

...

<template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title active-class=\"border\" v-text=\"item.taskName\"></v-list-item-title>
            </v-list-item-content>
          </template>
...

对于风格：

<style scoped>
.border {
  background-color: red;
}
</style>

我还尝试添加像class=\"v-list-group__header\" 这样的自定义类并对其应用样式但没有效果。

对不起，很长的问题。我尽量写得简明扼要，必要时写得详细。

标签： css vue.js vuejs2 vuetify.js

【解决方案1】：

你是如此接近！如果我正确理解您的问题，您需要做的就是将active-class 属性添加到您的v-list-group。这将应用您分配给它的任何类，仅当该项目处于活动状态时。在您的情况下，请确保将其添加到每个列表组中。

<v-list-group
  v-for="businessUnit in businessUnits"
  :key="businessUnit.businessUnitName"
  v-model="businessUnit.active"
  no-action
  active-class="grey lighten-2"
>

查看活动类部分here in the docs

【讨论】：