Vue.js 订餐应用中复选框分组独立限制的动态v-model问题

我明白你的问题了——现在所有复选框都共用同一个modal.selectedAddOn数组，导致选择限制会跨分组生效，而不是只作用于对应的分组。咱们来一步步调整代码，让每个分组独立维护自己的选中项：

核心问题分析 #

你当前用v-model="modal.selectedAddOn"把所有复选框绑定到同一个全局数组，不管哪个分组的复选框被选中，都会加到这个数组里。判断禁用条件时，也是基于整个数组的长度，自然会影响所有分组的复选框。

解决方案步骤 #

1. 调整数据结构，为每个分组单独维护选中项 #

把原来的单个selectedAddOn数组，改成一个对象selectedAddOns，用每个variant的id作为键，对应的值是该分组下选中的extra id数组。修改Vue的data部分：

data: {
  title: 'Food Menu',
  currentFilter: 'ALL',
  products : null,
  modal : {
    name : "",
    product_id : "",
    variants : {},
    price : 0,
    quantity : 1,
    remark :"",
    selectedAddOns: {} // 改成对象，每个variant对应一个独立数组
  },
},

2. 修改模板中的v-model和禁用逻辑 #

现在每个分组的复选框要绑定到对应的modal.selectedAddOns[variant.id]，同时禁用条件只需要判断当前分组的选中数量是否超过限制：

<fieldset class="row mb-2" v-for="(variant,variantIndex) in modal.variants" v-if="Object.keys(modal.variants).length !== 0">
  <legend class="col-form-label col-sm-4 pt-0">{{variant.description}}</legend>
  <div class="col-sm-8">
    <div class="form-check" v-for="(extra,extraIndex) in variant.extras">
      <!-- 绑定到当前variant对应的选中数组，用可选链处理未初始化情况 -->
      <input class="form-check-input" 
             type="checkbox" 
             :id="'variant-'+extra.id" 
             :value="extra.id" 
             v-model="modal.selectedAddOns[variant.id]"
             <!-- 禁用逻辑：仅判断当前分组的选中数量是否超限 -->
             :disabled="(modal.selectedAddOns[variant.id]?.length || 0) > variant.limitation && !modal.selectedAddOns[variant.id]?.includes(extra.id)">
      <label class="form-check-label" :for="'variant-'+extra.id" >
        {{extra.variant_name}} --- B$ {{extra.price}}
      </label>
    </div>
  </div>
</fieldset>

3. 初始化分组选中数组（可选但推荐） #

在获取到variant数据后，为每个分组初始化一个空数组，避免第一次选中时出现undefined的问题：

// 在variantOpen方法的axios回调里添加
.then(response => {
  if(!Object.keys(response.data).length){
    console.log("no data found");
  }else{
    this.modal.variants = response.data;
    // 初始化每个variant的选中数组
    this.modal.selectedAddOns = {};
    response.data.forEach(variant => {
      this.modal.selectedAddOns[variant.id] = [];
    });
  }
})

4. 提交时收集所有选中项 #

在addToCart方法里，你可以遍历modal.selectedAddOns来收集所有分组的选中项，方便提交到后端：

addToCart : function () {
  // 整理所有分组的选中数据
  const selectedAll = Object.entries(this.modal.selectedAddOns).map(([variantId, extraIds]) => ({
    variantId,
    extraIds
  }));
  const bodyFormData = new FormData();
  bodyFormData.append('product_id', this.modal.product_id);
  bodyFormData.append('selectedAddOns', JSON.stringify(selectedAll));
  // 添加其他需要提交的参数...
  
  axios({
    method: "post",
    url: "<?= base_url('product/addToCart'); ?>",
    data: bodyFormData,
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });
},

关键改动说明 #

• 用modal.selectedAddOns[variant.id]替代全局数组，让每个分组的选中项独立存储，互不干扰。
• 禁用条件中使用(modal.selectedAddOns[variant.id]?.length || 0)处理数组未初始化的情况，避免控制台报错。
• 初始化每个分组的选中数组，确保第一次交互时的流畅性。

这样修改后，每个分组的选择限制就只会作用于当前分组内的复选框，不会影响其他分组了。

内容的提问来源于stack exchange，提问作者maikucao