Vuejs 为复选框动态 v-model

Question

我一直在开发食品订购应用程序，但是我在限制复选框时遇到了这个问题，当我选中复选框时，我希望限制只适用于组而不是所有复选框。因为有些组可以检查多个。我假设它的 V-MODEL=modal.selectedAddOn 问题我试图设置动态但应用程序不会。

  <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">
            <input class="form-check-input" type="checkbox" :id="'variant-'+extra.id" :value="extra.id" v-model="modal.selectedAddOn" :disabled="modal.selectedAddOn.length > variant.limitation && modal.selectedAddOn.indexOf(extra.id) === -1">
            <label class="form-check-label" :for="'variant-'+extra.id" >

                {{extra.variant_name}} --- B$ {{extra.price}}
                }
            </label>
      </div>
    </div>
  </fieldset>

<script>
    var app = new Vue({
    el: '#app',
    data: {
        title: 'Food Menu',
        currentFilter: 'ALL',
        products : null,
        selectedAddOn : [],
        modal : {
            name : "",
            product_id : "",
            variants : {},
            price : 0,
            quantity : 1,
            remark :"",
        },
    },
    filters : {

    },
    mounted(){
    },
    methods : {
      variantOpen(e){
        var id = e.relatedTarget.id
        var product = this.products[id]
        //get variant
        axios.get('<?= base_url('product/getNewVariant/'); ?>'+ product.id,{})
        .then(response => {
            if(!Object.keys(response.data).length){
                 console.log("no data found");
             }else{

                this.modal.variants = response.data;
             }

        })

        this.modal.product_id = product.id;
        this.modal.name = product.name;
        this.modal.price = product.price;

      },
        setFilter : function(filter) {
          this.currentFilter = filter;
        },

        addToCart : function () {
          axios({
            method: "post",
            url: "<?= base_url('product/addToCart'); ?>",
            data: bodyFormData,
          })
            .then(function (response) {

              console.log(response);
            })
            .catch(function (response) {
              //handle error
              console.log(response);
            });


        },

    },

    });

这是我的服务器 (Codeigniter) 的响应

[
    {
        "id": "1",
        "variant_manager_id": "1",
        "description": "Choose Flavours",
        "limitation": "1",
        "status": "1",
        "create_date": "2021-12-29 16:56:00",
        "extras": [
            { "id": "1", "variant_id": "1", "variant_name": "Lotus", "status": "1", "is_checked": "false", "price": "0.00" },
            { "id": "2", "variant_id": "1", "variant_name": "Pandan", "status": "1", "is_checked": "false", "price": "0.00" },
            { "id": "3", "variant_id": "1", "variant_name": "Red Bean", "status": "1", "is_checked": "false", "price": "0.00" }
        ]
    },
    {
        "id": "2",
        "variant_manager_id": "1",
        "description": "Add On",
        "limitation": "1",
        "status": "1",
        "create_date": "2021-12-29 16:56:00",
        "extras": [
            { "id": "4", "variant_id": "2", "variant_name": "Egg", "status": "1", "is_checked": "false", "price": "1.00" },
            { "id": "5", "variant_id": "2", "variant_name": "Chicken", "status": "1", "is_checked": "false", "price": "1.00" }
        ]
    },
    {
        "id": "3",
        "variant_manager_id": "1",
        "description": "Choose Size",
        "limitation": "1",
        "status": "1",
        "create_date": "2021-12-29 16:56:00",
        "extras": [
            { "id": "6", "variant_id": "3", "variant_name": "Small", "status": "1", "is_checked": "false", "price": "1.00" },
            { "id": "7", "variant_id": "3", "variant_name": "Medium", "status": "1", "is_checked": "false", "price": "1.00" }
        ]
    },
    {
        "id": "4",
        "variant_manager_id": "1",
        "description": "Add On 2",
        "limitation": "1",
        "status": "1",
        "create_date": "2021-12-29 16:56:00",
        "extras": [
            { "id": "8", "variant_id": "4", "variant_name": "Left", "status": "1", "is_checked": "false", "price": "1.00" },
            { "id": "9", "variant_id": "4", "variant_name": "Middle", "status": "1", "is_checked": "false", "price": "1.00" },
            { "id": "10", "variant_id": "4", "variant_name": "Right", "status": "1", "is_checked": "false", "price": "1.00" }
        ]
    }
]

Answer 1

我们可以使用一个函数来检查所选是否已达到变体限制，并禁用其余未选中的复选框。

methods: {
  disableGroups(variant) {
    const extras = variant.extras.map(extra => extra.id)
    const selected = this.selectedAddOn.filter(extraId => {
      return extras.includes(extraId)
    })
    return selected.length >= variant.limitation
  }
}

<div v-for="variant in variants" :key="variant.id" style="margin-bottom: 2rem;">
  <label v-for="extra in variant.extras" :key="extra.id">
    <input
      type="checkbox"
      :value="extra.id"
      v-model="selectedAddOn"
      :disabled="disableGroups(variant) && !selectedAddOn.includes(extra.id)">
    {{ extra.name }}
  </label>
</div>

Demo

Vuejs 为复选框动态 v-model

Vuejs dynamically v-model for checkbox

vue.js

v-model