Vuejs dynamically v-model for checkbox

Question

i have been working on food ordering app however i encounter this issue when limiting checkbox , when i check the checkbox i want the limitation only apply to the group instead to all of the checkbox. because some group can check more than one. I assume its the V-MODEL=modal.selectedAddOn issue i tried to set dynamic but the app will not.

  <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);
            });


        },

    },

    });

this is the response from my server (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" }
        ]
    }
]

Your selectedAddOn is not in modal, should be v-model="selectedAddOn" instead — Christhofer Natalius
– Christhofer Natalius, Commented Dec 30, 2021 at 2:43
Hi i changed to selectedAddOn at the checkbox it still does not limit my checkbox — maikucao
– maikucao, Commented Dec 30, 2021 at 3:42
Do you mean that user can only check the checkboxes according to the limitation? e.g limitation = 1 mean user can only select one item, limitation = 2 mean user can select 2 items? — Christhofer Natalius
– Christhofer Natalius, Commented Dec 30, 2021 at 4:05
If my answer is working for you, please mark as accepted. If not, tell me what is missing. — Christhofer Natalius
– Christhofer Natalius, Commented Dec 30, 2021 at 12:46
Bro really thank you so much your help. im pretty new in vue been trying to solve this problem for the past few days. — maikucao
– maikucao, Commented Dec 31, 2021 at 4:33

Christhofer Natalius · Accepted Answer · 2021-12-30 06:05:39Z

1

We can use a function to check if the selected has reached the variant limitation, and disable the remaining unchecked chekboxes.

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

edited Dec 30, 2021 at 6:05

answered Dec 30, 2021 at 4:36

Christhofer Natalius

3,4992 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs dynamically v-model for checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related