Vuetify множественный выбор модели v не работает

#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 . Возможно, в вашем шаблоне есть какие-либо другие проблемы. Проверьте консоль браузера на наличие ошибок или предупреждений