Блог

Я пытаюсь добавить стрелку раскрывающегося списка на a v-list-group и добавить значок поиска. Это работает, но значок поиска переворачивается при открытии списка, а не выпадающего списка, как и следовало ожидать

 <v-list-group
    v-for="item in items"
    :key="item.title"
    prepend-icon="$expand"
    append-icon="search"
    v-model="item.active"
    no-action
>
    <template v-slot:activator v-slot:prependIcon>
    <v-list-item-content>
        <v-list-item-title v-text="item.title"></v-list-item-title>
    </v-list-item-content>
    </template>

    <v-list-item
    v-for="child in item.items"
    :key="child.title"
    >
    <v-list-item-avatar>
        <v-img max-height="30" max-width="30" :src="child.avatar"></v-img>
    </v-list-item-avatar>
    <v-list-item-content>
        <v-list-item-title v-text="child.title"></v-list-item-title>
    </v-list-item-content>
    </v-list-item>
</v-list-group>
  

Как мне это исправить?

Пример Codepen.

Для решения я добавил sub-group свойство в группу списков и добавил значок в слот активатора через v-list-item-icon .

 <v-list-group
  v-for="item in items"
  :key="item.title"
  prepend-icon="$expand"
  v-model="item.active"
  no-action
  sub-group
>
  <template v-slot:activator>
    <v-list-item-content>
      <v-list-item-title v-text="item.title"></v-list-item-title>
    </v-list-item-content>
    <v-list-item-icon>
      <v-icon>mdi-magnify</v-icon>
    </v-list-item-icon>
  </template>

  <v-list-item
    v-for="child in item.items"
    :key="child.title"
  >
    <v-list-item-avatar>
      <v-img
        max-height="30"
        max-width="30"
        :src="child.avatar"
      ></v-img>
    </v-list-item-avatar>
    <v-list-item-content>
      <v-list-item-title v-text="child.title"></v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list-group>
  

sub-group не очень хорошо документировано, но, по-видимому, оно перемещает значок расширения влево.