vuetify.js - 如何在父 v-list-group 扩展面板上添加下拉箭头？

Question

我正在尝试在 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>

我该如何解决？

代码笔示例。

标签： vuetify.js

Answer 1

对于解决方案，我将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没有很好的记录，但显然它将展开图标向左移动。