vue購物車全選同步單選邏輯處理

一 單選同步多選

 （1）單選添加一個點擊事件，然后動態綁定checked

 如下：

  <input type="checkbox" v-on:click="checkedtoAll(item)" :checked="item.checked" />

　　（2）在methods中，單選的狀態取反，然后循環遍歷購物車數組中的商品，如果每一個商品的選中狀態都為true的話，則綁定的全選框的狀態使與單選狀態一樣，即實現了單選同步多選

    多選框狀態：

<input type="checkbox" v-model="allChecked" v-on:click="alltoChecked" />全選

  狀態：

export default {
  data() {
    return {
      cartItem: [],
      allChecked: false
    };
  },

methods中邏輯處理：

  checkedtoAll(item) {
      item.checked = !item.checked;
      var checkedALL = this.cartItem.every(e => {
        return e.checked === true;
      });
      this.allChecked = checkedALL;
    }

二 多選同步單選

邏輯不同於單選，將多選狀態取反，然后循環遍歷購物車中的商品，使購物車中的每個商品的選中狀態都與多選的選中狀態相同

邏輯如下

 

 alltoChecked() {
      this.allChecked = !this.allChecked;
      //  window.console.log(this.allChecked)
      this.cartItem.forEach(e => {
        e.checked = this.allChecked;
      });
    },