Установите css для выбранного элемента подгруппы v-list-group - PullRequest
Новая
       18

Установите css для выбранного элемента подгруппы v-list-group

0 голосов
/ 17 апреля 2020

Я создаю выпадающий список с v-menu и v-list для параметров сортировки, некоторые из сортировок имеют 2 параметра, такие как алфавит в соответствии с именем или фамилией, поэтому я использую v-list-group, но она также содержит один вариант сортировки, поэтому для этого я использовал обычную v-list-item-group. я требую стилизовать последний выбранный сорт, с помощью v-list-item-group создается активный класс, и это решает мою проблему, в v-list-group нет события или какого-либо активного класса, который добавил, что я могу найти. Есть ли способ, которым я могу стилизовать выбранный элемент v-list-group? или есть другая реализация, которую я могу использовать, чтобы сделать это?

Это моя реализация 

    :value="shown"
    :close-on-content-click="false"
    left
    offset-x
    @input="changeMenuState"
    id="sortersMenu"
    transition="scale-transition"
  >
    <template v-slot:activator="{ on }">
      <v-btn @click="changeMenuState" id="filterBtn" text rounded v-on="on">
        {{ sorterText }}
        <v-icon id="dropdownIcon">{{ dropdownIcon }}</v-icon>
      </v-btn>
    </template>

    <v-list id="sorterList" dense>
      <v-list-item-group>
        <v-list-item
          active-class="activeSort"
          ripple
          v-for="(item, i) in singleFilters"
          @click="sorterChanged(item)"
          :key="i"
        >
          <v-list-item-content>
            <div class="sortContentDiv">
              <v-icon class="selectedSortIcon">check_circle</v-icon>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </div>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>

      <v-list-group v-for="item in multipleOptionsFilters" :key="item.title">
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item-content>
        </template>

        <v-list-item
          @click="sorterChanged(subItem)"
          v-for="subItem in item.items"
          :key="subItem.title"
        >
          <v-list-item-content>
            <v-list-item-title v-text="subItem.title"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-group>
    </v-list>
  </v-menu> ```
...