<v-list shaped>
<v-navigation-drawer>
<v-list shaped>
<v-list-item-group
v-model="selectedItem"
multiple
>
<template v-for="(item, i) in items">
<v-list-item
:value="item"
>
<v-list-item-title>{{item.text}}</v-list-item-title>
</v-list-item>
</template>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
data: () => ({
selectedItem: 0,
drawer: null,
items: [
{ icon: 'fas fa-home', text: 'Dashboard', route: '/home' },
{ icon: 'fas fa-money-check-alt', text: 'Invoices', route: '/invoices' },
{ icon: 'fas fa-dolly', text: 'Partners', route: '/partners' },
{ icon: 'fas fa-exchange-alt', text: 'Items', route: '/items' },
],
}),
vuetify(2.6.1)中非常简单的代码,多重选择不起作用, 我也无法预先选择要选择的第一个项目。它可能与 v-list-item-group 组件有关。
最佳答案
您的代码中有 2 个错误:
- 当您使用 multiple 属性时,selectedItem 应该数组;
- 当您应用
:value="item"
时,您的 selectedItem 数组应包含整个对象而不是其索引。
所以你的代码应该是:
...
<v-list-item-group
v-model="selectedItem"
multiple
>
<template v-for="(item, i) in items">
<v-list-item>
<v-list-item-title>{{item.text}}</v-list-item-title>
</v-list-item>
</template>
</v-list-item-group>
...
data: () => ({
items: [
...
],
selectedItem: [0],
}),
...
关于vue.js - Vuetify <v-list-item-group> v-model 多重选择不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70234023/