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 v-for="(variant,variantIndex) in modal.variants" v-if="Object.keys(modal.variants).length !== 0">
<legend >{{variant.description}}</legend>
<div >
<div v-for="(extra,extraIndex) in variant.extras">
<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 :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" }
]
}
]
CodePudding user response：
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>