#vue.js #vuetify.js
#vue.js #vuetify.js
Вопрос:
<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.
Ответ №1:
В вашем коде 2 ошибки:
- когда вы используете несколько реквизитов, 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],
}),
...
Комментарии:
1. Я попытался скопировать вставленный ваш фрагмент, как вы предлагаете, но теперь в моих строках отсутствует класс v-list-item—active , поэтому после щелчка ничего не выбрано вообще. ibb.co/wrgG5wB
2. @Coolman, он отлично работает в песочнице CodePen . Возможно, в вашем шаблоне есть какие-либо другие проблемы. Проверьте консоль браузера на наличие ошибок или предупреждений