How do I prepend the drop down arrow on a parent v-list-group expansion panel?

user_11386185 0
Viewed 1418

I'm trying to prepend the drop down arrow on a v-list-group and append a search icon. It's working, but the search icon flips when the list is opened and not the dropdown icon like is to be expected

<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>

How do I fix this?

Codepen example.

vuetify.js
1 Answers

For the solution I added the sub-group property to the list group and added the icon in the activator slot via 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 isn't very well documented but apparently it moves the expand icon to the left.

user_43975770
Related