lundi 2 août 2021

Dynamic generated checkboxes all is checked when one is clicked when v-model is applied

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