Vue/Nuxt列表如何实现点击已选项取消选中且切换无需两次点击

问题原因 #

现有逻辑存在两处核心错误，导致点击新项需要两次才能选中：

• 每次点击都会先将activeIndex赋值为当前点击的索引，再反转全局selected状态，没有区分点击目标是「已选中项」还是「未选中项」
• 单选场景下不需要全局维护selected状态，只要判断当前遍历索引与activeIndex是否相等即可确认选中状态，两个变量绑定反而会出现逻辑冲突

比如之前选中索引0，activeIndex=0、selected=true，点击索引1时，先把activeIndex改成1，再把selected翻转为false，此时activeIndex=1但selected=false，所以对勾不显示，第二次点击索引1时selected翻转为true才会显示对勾，就出现了需要点两次的问题。

修复方案 #

第一步：调整模板选中判断逻辑 #

删除选中条件里的selected判断，直接用索引相等判断是否选中。

第二步：修改点击事件逻辑 #

点击时先判断当前点击的索引是否为已激活的索引：

• 是：将activeIndex设为null，实现取消选中
• 否：直接将activeIndex设为当前点击的索引，实现直接切换选中项

修复后完整代码 #

<template>
  <div
    v-for="(item, itemIndex) in list"
    :key="itemIndex"
    @click="onClick(itemIndex)"
  >
    <div>
      <div v-if="activeIndex === itemIndex">
        <TickMark />
      </div>
      <Item />
    </div>
  </div>
</template>

<script>
export default {
    props: {
        questionModules: {
            required: true,
            type: Array,
        },
    },
    data() {
        return {
            activeIndex: null,
        }
    },
    computed: {
        // 补充缺失的list变量，如果你是要遍历props的questionModules可直接改v-for的遍历对象为questionModules，就不需要这段
        list() {
            return this.questionModules
        }
    },
    methods: {
        onClick (index) {
            if (this.activeIndex === index) {
                // 点击已选中项，取消选中
                this.activeIndex = null
                return
            }
            // 点击其他项，直接切换选中
            this.activeIndex = index
        },
    },
}
</script>

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