极客观点
项目管理
HarmonyOS
<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>我是用vue+vantui搭建的一个购物车，我想实现全选和全不选，以及单选的时候判断是否全部选中和部分选中，但是vant它的触发事件是change，也就是我在将列表中的其中一个checkbox设置为false时，我的本意是只让全选变为checked =false，可是这个时候全选按钮change了，变成false了，然后会执行让所有单选变成false(因为我在点击全选按钮时如果选中，所有列表全选中，如果全选按钮不选中，则所有的列表不选中)。 大神帮忙分析下，
虽然过去很久了, 那么多人浏览, 我回答下,
@change="toggleCheckedAll"
改为
@click="toggleCheckedAll"
不传参数val, 直接用this.checkedAll 判断,
值得注意的是, click 之后回去到的 this.checkedAll 是改变之前的