Vue中如何通过返回函数绑定事件处理器，获取选中分类信息？

方法一：使用箭头函数直接传递双参数 #

这是最直观的写法，在模板的事件绑定中用箭头函数把category和事件传入的items一起传给处理函数：

<template>
  <v-list-item v-for="(category, i) in categories" :key="i">
    <v-item-group multiple @update:model-value="(items) => selectedChanged(category, items)">
       <v-item></v-item>
    </v-item-group>
  </v-list-item>
</template>

<script>
function selectedChanged(category, items) {
  console.log(`选中项：${items}，所属分类：${category}`);
}
</script>

方法二：利用闭包返回事件处理函数 #

如果更倾向于闭包写法，确保模板中绑定的是闭包函数（而非立即执行外层函数），调整后如下：

<template>
  <v-list-item v-for="(category, i) in categories" :key="i">
    <v-item-group multiple @update:model-value="selectedChanged(category)">
       <v-item></v-item>
    </v-item-group>
  </v-list-item>
</template>

<script>
function selectedChanged(category) {
  // 返回接收items的函数，闭包保留当前category变量
  return function(items) {
    console.log(`选中项：${items}，所属分类：${category}`);
  }
}
</script>

注：需确保selectedChanged处于组件作用域内（比如Vue 2的methods或Vue 3的setup函数中），保证每次循环生成绑定当前category的闭包函数。

方法三：通过自定义DOM属性获取分类 #

给每个v-item-group添加自定义属性，在事件处理函数中通过事件源提取分类信息：

<template>
  <v-list-item v-for="(category, i) in categories" :key="i">
    <v-item-group 
      multiple 
      @update:model-value="selectedChanged"
      :data-category="category"
    >
       <v-item></v-item>
    </v-item-group>
  </v-list-item>
</template>

<script>
function selectedChanged(items, event) {
  const category = event.target.dataset.category;
  console.log(`选中项：${items}，所属分类：${category}`);
}
</script>

注：这种方式依赖DOM结构，需确认v-item-group渲染后的元素能正确读取data-category属性。

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