Vue v-for列表多选功能实现及点击切换图片不生效问题咨询

问题根因 #

• 你声明的selectedValues是普通JS数组，不具备Vue响应性，修改后不会触发视图更新
• 共用全局的state.selected状态控制所有元素的选中判断，点击任意元素都会修改这个全局值，无法单独记录每个选项的选中状态
• v-if判断逻辑错误，selectedValues[i] && state.selected === true的判断条件无法匹配你存进数组的数据结构，也无法对应单个元素的选中状态
• multipleSelect逻辑错误，存入数组的结构和判断需要的完全不匹配

修正方案 #

1. 模板部分修正 #

<div v-for="i in 64" :key="i" class="pr-2 pb-2">       
  <img
    v-if="selectedValues[i]"
    class="cursor-pointer w-3.5 h-9"
    :src="img1"
    @click="multipleSelect(i)"
  />
  <img
    v-else
    class="cursor-pointer w-3.5 h-9"
    :src="img2"
    @click="multipleSelect(i)"
  />
</div>

2. 逻辑部分修正 #

// 移除无用的全局选中状态state和冗余的selected变量
// 用ref声明响应式的选中集合，直接以下标为key存储布尔值表示对应选项是否选中
const selectedValues = ref<Record<number, boolean>>({})

function multipleSelect(index: number) {
  // 直接切换对应下标的选中状态，不存在的状态默认视为false
  selectedValues.value[index] = !selectedValues.value[index]
  console.log(index, selectedValues.value)
}

如果需要限制最大选中数量，可在函数内增加判断逻辑，示例如下：

function multipleSelect(index: number) {
  // 计算当前已选中的数量
  const selectedCount = Object.values(selectedValues.value).filter(Boolean).length
  // 示例限制最多选3个，已选满时点击未选中的元素不生效
  if (selectedCount >= 3 && !selectedValues.value[index]) return
  selectedValues.value[index] = !selectedValues.value[index]
}

补充说明 #

用对象存储选中状态比数组性能更好，无需遍历即可直接通过下标获取对应元素的选中状态。如果需要获取所有选中项的下标，可通过Object.keys(selectedValues.value).filter(key => selectedValues.value[Number(key)])快速提取。

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