Clash Royale CLAN TAG#URR8PPP

How to loop through a set of checkboxes and making each set independent of each other in vue.js

I'm building a pizza menu app in Vue.js. If a user buys 3 of the same size pizza, then I need to display the toppings they want to add for each pizza.
The problem is when I click on a checkbox for pizza-3, it jumps up a checks that topping on pizza-1.
For some reason, I can't get the set of toppings (checkboxes), independent of one another. I'm having trouble figuring this one out. Please help.

<div v-for="n in Number(quantity)">
<button class="btn btn-primary" type="button" data-toggle="collapse"
:data-target="'#collapse' +n" aria-expanded="false" aria-
controls="collapseExample">
Add Toppings for <b>Pizza - n</b>
</button>
<div class="collapse.show" :id="'#collapse' +n">
<div class="card card-body">
<div class="row">
<div v-for="category in categories" class="col">
<table>
<tr>
<th><h4><b>category.name</b></h4></th>
</tr>
<tr v-for="name in category.topping_items">
<td>
<input type="checkbox" v-model="selected" :value="name.item
+ '-pizza-' + n " :id="name.id + n" />
<label :class="bold_name: name.double_price"
:for="name.id + n">name.item</label>
</td>

</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="align-content-center">
<button @click="closeForm">Add Selected Toppings</button>
</div>

<script>
export default
name: "AddToppings",
props:['item', 'quantity'],
data()
return
selected:

,
created()

,
computed:
categories()
return this.$store.state.cat_toppings;

,
methods:
cancelCatDelete()
$('#addToppings').modal('hide')
,
closeForm()
//console.log('cart', this.item);
$('#addToppings').modal('hide');
this.item.toppings.push(this.selected);
this.$store.dispatch('addItemToCart', this.item);

this.selected = ;
this.$emit('form_closed');





1 Answer
1

I've updated your code.

Here are the major things that changed:

selected

watcher

categories

selected

this.$set()

selected

v-model

v-model="selected[category.name]"

selected

like this:

this.selected.forEach((selected, category_name) =>
this.item.toppings.push(selected);
);


See the fully updated code below:

export default
name: "AddToppings",
props: ['item', 'quantity'],
data()
return
selected:

,
created()

,
computed:
categories()
return this.$store.state.cat_toppings;

,
watch:
categories:
immediate: true,
handler(categories)
categories.forEach((category) =>
if (this.selected[category.name] == undefined)
this.$set(this.selected, category.name, );

)


,
methods:
cancelCatDelete()
$('#addToppings').modal('hide')
,
closeForm()
//console.log('cart', this.item);
$('#addToppings').modal('hide');
this.selected.forEach((selected, category_name) =>
this.item.toppings.push(selected);
);
this.$store.dispatch('addItemToCart', this.item);

this.selected = ;
this.$emit('form_closed');




<div v-for="n in Number(quantity)">
<button class="btn btn-primary" type="button" data-toggle="collapse" :data-target="'#collapse' +n" aria-expanded="false" aria- controls="collapseExample">
Add Toppings for <b>Pizza - n</b>
</button>
<div class="collapse.show" :id="'#collapse' +n">
<div class="card card-body">
<div class="row">
<div v-for="category in categories" class="col">
<table>
<tr>
<th>
<h4><b>category.name</b></h4>
</th>
</tr>
<tr v-for="name in category.topping_items">
<td>
<input type="checkbox" v-model="selected[category.name]" :value="name.item
+ '-pizza-' + n " :id="name.id + n" />
<label :class="bold_name: name.double_price" :for="name.id + n">name.item</label>
</td>

</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="align-content-center">
<button @click="closeForm">Add Selected Toppings</button>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.