我正在尝试在 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>
如何解决这个问题?
最佳答案
对于解决方案,我添加了 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
没有很好的记录,但显然它将展开图标移至左侧。
关于vuetify.js - 如何在父 v-list-group 扩展面板上添加下拉箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64774870/