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

Posted 2023-02-16

【中文标题】Vuejs 将 3 个元素绑定到 1 个元素 true false active toggle

【英文标题】：Vuejs binding 3 element to 1 element true false active toggle

【发布时间】：2022-01-05 13:56:50

【问题描述】：

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-***</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 *** 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  src="https://i.hizliresim.com/agv40t1.png"  class="img-fluid "></router-link>
                            <router-view></router-view>
                        </button>
                    </div>
                    
                </div>  

            </div>

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

【参考方案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>