Vuejs 将 3 个元素绑定到 1 个元素 true false active toggle

Question

Vuejs 一个元素 true == button true，一个元素 false == button true，一，二，三个现在 button == false。

我有 3 个元素，当单击其中一个元素按钮时，我想要为真，但我不希望在假边使用相同的方式。

对于假面，三个都是假的，然后按钮是假的，这部分我做不到

export default {
        el: "#app",
        data() {
            return {
                items: [
                    {
                        title: 'American continent(1-3 country)',
                    },
                    {
                        title: 'Europe continent(1-6 country)',
                    },
                    {
                        title: 'Asia continent(1-10 country)',
                    }
                ],
                active1: false
            }
        
    },
    methods: {
        toggleActive(index) {


            let item = this.items[index];
            this.items[index] 

            item.active = !item.active;

            console.log(item.active[index]);
            if (item.active == false ) {
                this.active1 = false;

            }
            else    {
                this.active1 = true;
                // console.log(index);
            }

        },

    },
}

.active{
    /* border: 1px solid  #1488CC; */
    border-radius: 5px;
    box-shadow: 0 0 0 1px #1488CC;
    color: #2B32B2;
}
.dsadsa{
    cursor: pointer;
}
.button{
    opacity: .4;
    background-color: red;
}
.ClassDisabled{
    opacity: 1;
    background-color: blue;
}

<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 " >Which region do you prefer VPN connection from?</h2>
                        <h5>You can choose more than one.</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>

                        <button  class="button"   :class="{ ClassDisabled: active1}"> button</button>

                        <button  >
                            <router-link to="/eighthPage"   >Continue <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>

Answer 1

如果我理解正确，请尝试如下 sn-p:

new Vue({
  el: '#demo',
  data() {
    return {
      items: [
        {title: 'American continent(1-3 country)',},
        {title: 'Europe continent(1-6 country)',},
        {title: 'Asia continent(1-10 country)',}
      ],
      active1: false,
      selected: []
    }
  },
  methods: {
    selectedItem(item) {
      return this.selected.find(s => s === item)
    },
    toggleActive(item) {
      if (this.selected.find(s => s === item)) {
        this.selected = this.selected.filter(f => f !== item)
      } else {
        this.selected.push(item)
      }
      this.selected.length ? this.active1 = true : this.active1 = false
    },
  },
})

.active{
  /* border: 1px solid  #1488CC; */
  border-radius: 5px;
  box-shadow: 0 0 0 1px #1488CC;
  color: #2B32B2;
}
.dsadsa{
  cursor: pointer;
}
.button{
  opacity: .4;
  background-color: red;
}
.ClassDisabled{
  opacity: 1;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="box my-4" v-for="(item, index) in items" :key="index" id="box">
    <div :class="{ active: selectedItem(item.title)}" @click="toggleActive(item.title)" class="dsadsa">
      <div style="padding: .2rem">
        <p class="dsadsa">{{item.title}}</p>
      </div>
    </div>
  </div>
  <button class="button" :class="{ ClassDisabled: active1 }"> button</button> 
</div>