Vuetify 3：如何将列表项复选框绑定到值数组？

Question

我正在尝试创建一个包含多个项目的

<v-list>

，每个项目代表一个事件。

每个项目都应包含一个复选框，我想将整个列表绑定到名为

selectedEventIDs

的数组（通过

v-model

）。换句话说，

selectedEventIDs

应包含已检查的事件 ID 的列表。

我使用 Vuetify 3 文档中的这个示例作为起点，但我不知道该放在哪里

v-model

。

（这个例子有点令人困惑。它说：“利用

v-list-group

，轻松将操作连接到您的图块。”但是，实际代码并不 包含

<v-list-group>

。也许这是一个拼写错误，并且它应该说“利用

v-list-item-action

...”来代替？）

我当前的代码如下所示。我已经尝试了很多变体 - 有或没有

<v-list-group>

包裹在

<v-list-item>

周围。我就是无法让它发挥作用。

<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

您可以在复选框组件上使用

v-model

，而不是在复选框 btn 组件上使用。因此，只需将

v-checkbox-btn

替换为

v-checkbox

并使用

v-model

即可。

这是一个演示-

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 文档目前并未处于最佳状态，因为开发团队主要专注于错误修复并完成 v2 到 v3 组件的迁移。这就是我的做法，根据我的测试，这似乎有效：

首先，为每个事件对象添加一个布尔值以跟踪它是否被检查（该数组也应该是反应式的）

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

其次，将每个

v-checkbox-btn

 v 模型设置为 

isChecked

 属性

<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>
...

最后，创建并使用一个计算属性，该属性返回当前检查的所有已过滤事件 ID。

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

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

Answer 3

您需要将

v-model:selected="selectedItems"

 添加到 

v-list

<v-list v-model:selected="selectedItems" >....</v-list> 文档：

https://vuetifyjs.com/en/api/v-list/#props-selected