lundi 6 mai 2019

VueJS checkboxes with objects as values bound to an array property do not come off of array when unchecked

In one of my VueJS components, I have an array called selectedJobs, which is for checked html checkboxes in an html table. The data in the html table is from an array of objects called replenJobsList;

/* My Component */
<template>
...
<table>
...
<tr v-for="replenJob in replenJobsList">
    <td>
        <input v-bind:id="'add-to-batch-' + replenJob.sku + replenJob.rplFrom + replenJob.replenTo"
            v-bind:value="{
                id: 0,
                manualMoveBatchId: 0,
                modifyDate: new Date().getTime(),
                moveFrom: replenJob.rplFrom,
                moveTo: replenJob.replenTo,
                sku: replenJob.sku,
                skuDescription: replenJob.description,
                status: 'active',
                units: replenJob.unitsToReplenish
            }"
            v-model="selectedJobs"
            type="checkbox">
        <label v-bind:for="'add-to-batch-' + replenJob.sku + replenJob.rplFrom + replenJob.replenTo"></label>
     </td>
</tr>
...
</table>
...
</template>
...
data() {
    return {
        selectedJobs: [],
    }
}

If I console.log(selectedJobs.length); for all checked checkboxes, it will give me the correct length. But when I uncheck a checkbox and check the length of the array again, the checkbox length doesn't decrement by 1.

Furthermore, if I check the same checkbox again, it will add one more object to the selectedJobs array, instead of decrementing and incrementing again.

How do I get the checkboxes to properly add and come off of the selectedJobs array?




Aucun commentaire:

Enregistrer un commentaire