How to get the selected item of v-list in vuetify3

[Kugeleis]

In vuetify2 there was the v-list-item-group offering the v-model prop. How is this done in vuetify3?

<v-list>
    <v-item-group v-model="value"
      ><v-list-item v-for="item in items" :key="item">
          <v-list-item-title>{{ item }}</v-list-item-title>
        </v-list-item>
    </v-item-group>
</v-list>

doesn't work.

[santiagoaloi]

You only need v-model:selected="..." in v3
Playground reproduction:

<template>
  <v-app>
    <v-main>
      <code> {{ selected }} </code>   
      <v-card class="mx-auto" max-width="300">

        <v-list v-model:selected="selected" density="compact">
          <v-list-subheader>REPORTS</v-list-subheader>
          <v-list-item
           v-for="(item, i) in items"
           :key="i"
           :value="item"
           active-color="primary"
           >

            <template v-slot:prepend>
              <v-icon :icon="item.icon"></v-icon>
            </template>

            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item>
        </v-list>
      </v-card>   
    </v-main>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const selected = ref([])
  const items = ref( [
    { text: 'Real-Time', icon: 'mdi-clock' },
    { text: 'Audience', icon: 'mdi-account' },
    { text: 'Conversions', icon: 'mdi-flag' },
  ])
</script>

[PrimozGodec]

@santiagoaloi
Is there a way to do a single-item selection? With this snippet, I can only select multiple items. I tried to set it to select-strategy="single", but it is not working.

[santiagoaloi]

Hi, I’m not entirely sure what you mean. This list isnt confiugured for multiple selections, it only pushes the selected object into the array.
Do you mean that by “single item” you only want one property from the object added to the array?

Also, note that "single" isn’t a valid value for the select-strategy prop.

[PrimozGodec]

Thank you for the answer. Exactly — I was looking for a mechanism that allows adding only one element to the list, and automatically removes the previous one when a new item is selected. I can handle this with a custom script function, but I was hoping for a cleaner solution.

Is there another component that renders similarly to a list but is better suited for single-item selection?

[santiagoaloi]

Allright, then you only need to tweak the value prop in v-list-item - take a look at this reproduction

[KaelWD]

The default is select-strategy="single-leaf". single-leaf and single-independant will both behave the same if you don't have nested items.

[Kugeleis]

Thanks. It would be great if this could be explained in the docs.