<template>
<div class="car">
<h3 style="text-align: center;"></h3>
<ul>
<li v-for="(item,index) in carts" :key="index">
<div class="carProList">
<div class="carProSelect carProInfo">
<van-checkbox v-model="item.danxuan" @change="danxuanChecked(item.danxuan)"/>
</div>
<div class="carProImg carProInfo">
<img :src="item.proImg"/>
</div>
<div class="cartInformation carProInfo">
<div>
{{item.proName}}
</div>
<div>
{{item.proPrice}}
</div>
<div>
<van-stepper v-model="item.homeValue" />
</div>
</div>
<div class="deleteCarPro carProInfo">
1
</div>
</div>
</li>
</ul>
<van-submit-bar
:price="sum()"
button-text=""
>
<van-checkbox @change="toggleCheckedAll" v-model="checkedAll"></van-checkbox>
</van-submit-bar>
</div>
</template>
<script>
import { mapState } from "vuex"
import { Checkbox, CheckboxGroup } from "vant";
import { Card } from "vant";
import { Stepper } from "vant";
import { SubmitBar } from "vant";
export default{
data(){
return{
checkedAll:true,
partCheck:false
}
},
components:{
[Checkbox.name]:Checkbox,
[CheckboxGroup.name]:CheckboxGroup,
[Card.name]:Card,
[Stepper.name]:Stepper,
[SubmitBar.name]:SubmitBar
},
computed:{
...mapState([
"carts"
])
},
methods:{
toggleCheckedAll(val){
if(!val){
this.carts.forEach((item)=>{
item.danxuan = false
})
this.checkedAll = false
}else{
this.carts.forEach((item)=>{
item.danxuan = true
})
this.checkedAll = true
}
},
danxuanChecked(cart){
if(!cart){
this.checkedAll = false
}
var isExitCheckedNo = this.carts.every(item=>{
return item.danxuan === true
});
console.log(isExitCheckedNo);
if(isExitCheckedNo){
this.checkedAll = true
}else{
this.checkedAll = false
}
},
sum(){
var totalSum = 0;
this.carts.forEach((item)=>{
if(item.danxuan){
totalSum+=item.proPrice*item.homeValue*100
}
})
return totalSum
}
}
}
</script>I"m a shopping cart built with vue+vantui. I want to select all and none, and determine whether to select all or part of it when selecting, but the trigger event of vant is change, that is, when I set one of the checkbox in the list to false, my intention is to change all selection to checked = false, but at this time the select all button change, becomes false. It then executes to make all the radio selections false (because if I click the Select all button, all lists are selected, and if the select button is not selected, all lists are not selected). Help me with the analysis,