Vue.js实现3个元素选中状态联动按钮激活/禁用切换问题

核心问题原因 #

原逻辑仅判断当前点击元素的选中状态就直接修改按钮状态，没有全局校验所有可选项的选中情况，导致取消单个选中时就算还有其他选中项，也会误把按钮设为禁用。

修复代码 #

修改后的JS逻辑 #

export default {
  el: "#app",
  data() {
    return {
      items: [
        {
          title: '美洲（1-3个国家可选）',
          active: false // 初始化添加active属性，保证Vue2响应式正常
        },
        {
          title: '欧洲（1-6个国家可选）',
          active: false
        },
        {
          title: '亚洲（1-10个国家可选）',
          active: false
        }
      ],
      isBtnActive: false // 替换原无意义命名active1，语义更清晰
    }
  },
  methods: {
    toggleActive(index) {
      // 切换当前点击项的选中状态
      this.items[index].active = !this.items[index].active
      // 全局校验：只要有任意一项选中，按钮就激活，否则禁用
      // Array.some方法只要有一个元素满足条件就返回true，完全匹配需求
      this.isBtnActive = this.items.some(item => item.active)
    }
  }
}

配套HTML修改（按钮部分） #

替换状态变量，同时添加原生disabled属性防止误点击：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template>
    <div>
        
        <section id="seventhPage" class="AboutSection d-flex flex-column justify-content-center align-items-start text-center pt-5">

            <div>
                <router-link to="/sixthPage" class="BackBtn"> <img src="https://img.icons8.com/ios-glyphs/30/000000/back.png"/></router-link>
                <router-view></router-view>
            </div>

            <div class="container-fluid logoHeader">
                <h1>Vue-VPN</h1>
            </div>

            <div class="AboutText container-fluid ">
                <div class="row justify-content-center align-items-center text-center ">
                    <div class="col-md-12 py-4">
                        <h2 class="fw-bolder " >你希望VPN从哪个区域接入？</h2>
                        <h5>可多选</h5>
                    </div>

                    <div class="col-md-3">


                        <div class="box my-4" v-for="(item,index) in items" :key="index" id="box">
                            <div :class="{ active: item.active  }" @click="toggleActive(index)">
                                <div class="card Fcard d-flex  flex-row justify-content-center align-items-center" style="padding: 1rem 2rem !important">
                                    <p> <label>{{item.title}}</label>  </p>
                                </div>
                            </div>
                        </div>

                        <!-- 注意原ClassDisabled命名语义反了，激活状态建议改名为ClassEnabled更合理 -->
                        <button  class="button"   :class="{ ClassDisabled: isBtnActive}" :disabled="!isBtnActive"> 按钮</button>

                        <button  >
                            <router-link to="/eighthPage"   >继续 <img width="16" src="https://i.hizliresim.com/agv40t1.png" alt="" class="img-fluid "/></router-link>
                            <router-view></router-view>
                        </button>
                    </div>
                    
                </div>  

            </div>

           
        </section>
    </div>
</template>

CSS可选优化（命名语义修正+交互优化） #

.active{
    border-radius: 5px;
    box-shadow: 0 0 0 1px #1488CC;
    color: #2B32B2;
}
.dsadsa{
    cursor: pointer;
}
/* 按钮禁用状态样式 */
.button{
    opacity: .4;
    background-color: red;
    cursor: not-allowed;
}
/* 按钮激活状态样式，建议替换原反语义的ClassDisabled命名 */
.ClassEnabled{
    opacity: 1;
    background-color: blue;
    cursor: pointer;
}

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