Vuejs One elment true == button true, one element false == button true , one, two, three now button == false .
I have 3 elements I wanna when clicked one of element button is true but I dont want the same way for the false side.
for the false side all three of them false then button false, this section i cant make it
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>CodePudding user response：
If I understood you correctly try like following snippet:
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>