Within my VueJS component, I am utilizing an array named selectedJobs to track checked checkboxes in an HTML table. The data displayed in the table is sourced 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: [],
}
}
Upon evaluating
console.log(selectedJobs.length);Moreover, upon rechecking the same checkbox, an additional object is added to the selectedJobs array instead of toggling its presence.
How can I ensure that checkboxes are accurately added to and removed from the selectedJobs array?