please I need help. I have some checkboxes that are generated dynamically, once one of the checkboxes is clicked the others all get checked vice versa when unchecked. But this only happens when binding with v-model. I'm curious coz, I've used the same style before and worked just fine.
Here are a few snippets
<div v-for="deduction in deductions" :key="deduction.id" class="form-check form-check-inline">
<input class="form-check-input" :name="deduction.title" v-model="salaryForm.selectedDeductions" v-bind:value="deduction" :id="deduction.id" type="checkbox">
<label class="form-check-label" for="inlineCheckbox1"></label>
</div>
<div></div>
Here is my data
<script>
export default {
data() {
return {
salaryForm: new Form ({
id: '',
name: '',
salary: '',
commission: 0,
selectedDeductions: [
{
"id": 2,
"title": "Pension",
"isPercent": 1,
"percentage": 2,
"isActual": 0,
"actual": null,
"created_at": "2021-07-28T17:44:05.000000Z",
"updated_at": "2021-07-28T18:52:36.000000Z"
},
{
"id": 3,
"title": "Lateness",
"isPercent": 0,
"percentage": null,
"isActual": 1,
"actual": 400,
"created_at": "2021-07-28T18:22:50.000000Z",
"updated_at": "2021-07-28T18:28:55.000000Z"
},
{
"id": 6,
"title": "Housing",
"isPercent": 1,
"percentage": 3.2,
"isActual": 0,
"actual": null,
"created_at": "2021-07-28T19:53:08.000000Z",
"updated_at": "2021-07-28T19:53:08.000000Z"
},
{
"id": 7,
"title": "Car",
"isPercent": 1,
"percentage": 2,
"isActual": 0,
"actual": null,
"created_at": "2021-07-28T20:14:04.000000Z",
"updated_at": "2021-07-28T20:14:04.000000Z"
},
{
"id": 8,
"title": "Medical",
"isPercent": 0,
"percentage": null,
"isActual": 1,
"actual": 5000,
"created_at": "2021-07-28T20:14:48.000000Z",
"updated_at": "2021-07-28T20:14:48.000000Z"
},
{
"id": 9,
"title": "Transportation",
"isPercent": 0,
"percentage": null,
"isActual": 1,
"actual": 2000,
"created_at": "2021-07-28T20:16:29.000000Z",
"updated_at": "2021-07-28T20:16:29.000000Z"
}
],
amount_to_paid: '',
comment: '',
}),
}
},
Thanks for your time.
Aucun commentaire:
Enregistrer un commentaire