<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搭建的一個購物車，我想實現(xiàn)全選和全不選，以及單選的時候判斷是否全部選中和部分選中，但是vant它的觸發(fā)事件是change，也就是我在將列表中的其中一個checkbox設(shè)置為false時，我的本意是只讓全選變?yōu)閏hecked =false，可是這個時候全選按鈕change了，變成false了，然后會執(zhí)行讓所有單選變成false(因為我在點擊全選按鈕時如果選中，所有列表全選中，如果全選按鈕不選中，則所有的列表不選中)。 大神幫忙分析下，