vue2购物车单选影响全选案例代码

在Vue.js中创建一个购物车的单选商品会影响全选功能，通常会有一个全选按钮和每个商品的单独复选框。下面是一个简单的示例代码：

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleAll" :disabled="!selectableItems.length">
    <span>全选</span>
    <ul>
      <li v-for="(item, index) in selectableItems" :key="index">
        <input type="checkbox" :value="item.id" v-model="selectedIds" @change="toggleItem(index)">
        <label>{{ item.name }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      selectedIds: [], // 存放已选择商品的ID列表
      selectableItems: [
        { id: 1, name: '商品A' },
        { id: 2, name: '商品B' },
        { id: 3, name: '商品C' }
      ]
    };
  },
  methods: {
    toggleAll(e) {
      this.selectedIds = e.target.checked ? this.selectableItems.map(item => item.id) : [];
    },
    toggleItem(index) {
      if (this.selectAll) {
        this.selectedIds[index] = this.selectableItems[index].id;
      } else {
        this.selectedIds.splice(index, 1);
      }
    }
  },
  computed: {
    // 如果所有商品都勾选，设置selectAll为true
    isEverythingSelected() {
      return this.selectedIds.length === this.selectableItems.length && this.selectAll;
    }
  }
};
</script>

在这个例子中，当用户点击全选框时，`toggleAll`方法会被触发，更新`selectedIds`。如果设置了全选状态(`selectAll`为真)，则遍历`selectableItems`并添加所有商品的ID；反之，则清除已选的商品ID。同时，在`toggleItem`方法中，如果`selectAll`为真，仅根据索引添加或删除对应商品的ID。