Vue中如何为v-item-group的update:model-value传递自定义参数？

你可以通过在@update:model-value的绑定中使用箭头函数，把分类的标识（比如索引或分类对象）作为额外参数传递给回调函数，这样就能明确区分选中项属于哪个分类。

修改模板代码 #

重点修改v-item-group的事件绑定部分，添加分类相关参数：

<v-list>
    <v-list-item v-for="(category, i) in categories" :key="i" :title="category.category">
        <template v-slot:prepend>
            <v-avatar color="grey-lighten-1">
                <v-icon color="white">{{ category.icon }}</v-icon>
            </v-avatar>
        </template>

        <!-- 用箭头函数传递选中项、分类对象和分类索引 -->
        <v-item-group multiple @update:model-value="(selectedItems) => selectedUpdated(selectedItems, category, i)">
            <v-container>
                <v-row>
                    <v-col v-for="(item, i) in category.items" :key="i" md="3">
                        <v-item v-slot="{ isSelected, toggle }">
                            <v-card :color="isSelected ? 'primary' : ''" class="d-flex align-center" dark
                                @click="toggle">
                                <div class="text-h5 flex-grow-1 text-center">
                                    <v-img cover :src="item.icon" height="125"></v-img>
                                    {{ item.title }}
                                </div>
                            </v-card>
                        </v-item>
                    </v-col>
                </v-row>
            </v-container>
        </v-item-group>

    </v-list-item>
</v-list>

修改回调函数 #

更新selectedUpdated函数，接收额外的分类参数：

function selectedUpdated(selectedItems: number[], category: typeof categories[0], categoryIndex: number) {
    console.log('所属分类索引:', categoryIndex);
    console.log('所属分类名称:', category.category);
    console.log('选中项索引数组:', selectedItems);
    // 这里可以根据分类信息做后续业务处理
}

说明 #

箭头函数在这里起到包装作用，既保留了v-item-group原生传递的选中项数组，又额外传入了当前分类的对象和索引，让你能精准识别选中项所属的分类维度。

内容的提问来源于stack exchange，提问作者timewalker