VueJS/Vuetify中如何为循环生成组件绑定独立选中值

核心思路 #

给每个项目单独维护选中状态集合，替代全局共用的选中逻辑，实现各项目筛选选项独立控制，最后将状态数据转换为目标格式。

代码实现 #

1. 初始化数据与状态存储 #

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

// 示例初始项目数据，可替换为你的实际数据
const projects = ref([
  {
    name: 'Valetta',
    options: ['val1_dep1', 'val2_dep2', 'val3_dep3']
  },
  {
    name: 'Malta',
    options: ['val1_dep1', 'val4_dep4']
  }
])

// 存储每个项目对应的选中选项，键为项目名，值为选中选项数组
const selectedOptionsByProject = ref({})

// 初始化空选中集合
projects.value.forEach(project => {
  selectedOptionsByProject.value[project.name] = []
})
</script>

2. 模板循环生成独立筛选组件 #

<template>
  <div v-for="project in projects" :key="project.name" class="project-filter">
    <h3>{{ project.name }}</h3>
    <v-chip
      v-for="option in project.options"
      :key="option"
      :color="isSelected(project.name, option) ? 'primary' : 'grey'"
      @click="toggleOption(project.name, option)"
      variant="outlined"
    >
      {{ option }}
    </v-chip>
  </div>
  
  <!-- 实时展示转换后的目标格式结果 -->
  <pre>{{ formattedResult }}</pre>
</template>

3. 实现选中切换与结果格式化 #

<script setup>
// ... 承接上面的初始化代码

// 判断当前项目下的选项是否被选中
const isSelected = (projectName, option) => {
  return selectedOptionsByProject.value[projectName].includes(option)
}

// 切换选项选中状态
const toggleOption = (projectName, option) => {
  const selectedList = selectedOptionsByProject.value[projectName]
  const optionIndex = selectedList.indexOf(option)
  optionIndex > -1 ? selectedList.splice(optionIndex, 1) : selectedList.push(option)
}

// 转换为需求的结果格式
const formattedResult = computed(() => {
  return Object.entries(selectedOptionsByProject.value).map(([project, options]) => ({
    project,
    options
  }))
})
</script>

4. 可选样式优化 #

<style scoped>
.project-filter {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}
.v-chip {
  margin: 0.25rem;
}
</style>

说明 #

• 每个项目的选中状态独立存储在selectedOptionsByProject对应属性中，不会出现跨项目的选项联动高亮问题。
• formattedResult计算属性会实时将选中状态转换为[{"project":"Valetta","options":["val1_dep1","val3_dep3"]},...]格式。
• 点击v-chip仅修改当前项目的选中集合，其他项目筛选状态不受影响。

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