Vuetify 3: How can I bind list item checkboxes to an array of values?

Question

I'm trying to create a <v-list> containing several items, each representing an event.

Each item should include a checkbox, and I'd like to bind the entire list to an array named selectedEventIDs (via v-model). In other words, selectedEventIDs should contain a list of the event IDs that are checked.

I'm using this example from the Vuetify 3 docs as a starting point, but I can't figure out where to put v-model.

(The example is a bit confusing. It says: "Utilizing v-list-group, easily connect actions to your tiles." However, the actual code doesn't contain a <v-list-group>. Perhaps this is a typo, and it should say "Utilizing v-list-item-action..." instead?)

My current code is shown below. I've tried many variations on this - both with and without a <v-list-group> wrapped around the <v-list-item>s. I just can't get it to work.

<template>

  <p>selectedEventIDs: {{ formState.selectedEventIDs }}</p>

  <!-- Where should I put v-model="formState.selectedEventIDs"? -->

  <v-list lines="three" select-strategy="classic">

    <v-list-item
      v-for="event in events"
      :key="event.id"
      :value="event.id"
    >

      <template v-slot:prepend="{ isActive }">
        <v-list-item-action start>
          <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
        </v-list-item-action>
      </template>

      <v-list-item-title>{{ event.name }}</v-list-item-title>

    </v-list-item>

  </v-list>


</template>

<script setup>

import { reactive } from 'vue'
import { VList, VListItem, VListItemAction, VCheckboxBtn, VListItemTitle } from 'vuetify/components'

const events = [
  { id: 1, name: 'Birthday Party' },
  { id: 2, name: 'Basketball Game' },
  { id: 3, name: 'Physics Lecture' },
]

const formState = reactive({
  selectedEventIDs: [],
})

</script>

Answer 1

You can use v-model on the checkbox component, not the checkbox btn component. So, simply replace v-checkbox-btn with v-checkbox and use v-model on it.

Here is a demo-

const { createApp, reactive } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()

const app = createApp({
  setup() {
    const events = [{
        id: 1,
        name: 'Birthday Party'
      },
      {
        id: 2,
        name: 'Basketball Game'
      },
      {
        id: 3,
        name: 'Physics Lecture'
      },
    ]
    const formState = reactive({
      selectedEventIDs: [],
    })
    return {
      events,
      formState
    }
  }
}).use(vuetify).mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <p>selectedEventIDs: {{ formState.selectedEventIDs }}</p>
    <v-list select-strategy="classic" dense>
      <v-list-item
        v-for="event in events"
        :key="event.id"
        :value="event.id"
        >
        <template v-slot:prepend="{ isActive }">
          <v-list-item-action start>
            <v-checkbox v-model="formState.selectedEventIDs" :value="event"></v-checkbox>
          </v-list-item-action>
        </template>
        <v-list-item-title>{{ event.name }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-app>
</div>

Answer 2

Vuetify 3 docs are notoriously not in the best state right now as the dev team is primarily focusing on bug fixes and finishing the v2 to v3 component migration. This is how I would do it, which seems to work based on my testing:

First, Add a boolean to each event object to track whether it's checked or not (the array should also be made reactive)

const events = reactive([
  { id: 1, name: 'Birthday Party', isChecked: false },
  { id: 2, name: 'Basketball Game', isChecked: false },
  { id: 3, name: 'Physics Lecture', isChecked: false }
]);

Second, set each v-checkbox-btn v-model to the isChecked property

<v-list-item v-for="event in events" :key="event.id" :value="event.id">
  <template #prepend>
    <v-list-item-action start>
      <v-checkbox-btn v-model="event.isChecked"></v-checkbox-btn>
    </v-list-item-action>
  </template>
...

Finally, create and use a computed property that returns all the filtered event ids that are currently checked.

const checkedEvents = computed(() => {
  return events.filter(e => e.isChecked).map(e => e.id);
});

<p>selectedEventIDs: {{ checkedEvents }}</p>