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

Question

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?

Answer 1

It won't correctly track if you create the object in the markup, you'll have to do it beforehand. You could use a computed property.

new Vue({
  el: "#app",
  data: {
    replenJobsList: [
      { rplFrom: '[email protected]', replenTo: '[email protected]', sku: 1, description: '11111', unitsToReplenish: 33 },
      { rplFrom: '[email protected]', replenTo: '[email protected]', sku: 2, description: '22222', unitsToReplenish: 22 },
      { rplFrom: '[email protected]', replenTo: '[email protected]', sku: 3, description: '33333', unitsToReplenish: 11 },
    ],
    selectedJobs: [],
  },
  computed: {
    compJobsList() {
      return this.replenJobsList.map((job, index) => ({
          id: index,
          manualMoveBatchId: 0,
          modifyDate: new Date().getTime(),
          moveFrom: job.replFrom,
          moveTo: job.replenTo,
          sku: job.sku,
          skuDescription: job.description,
          status: 'active',
          units: job.unitsToReplenish,
        }));
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr><th>Jobs</th></tr>
    </thead>
    <tbody>
      <tr v-for="job in compJobsList" :key="job.id">
        <td>
          <input type="checkbox"
            :value="job" 
            v-model="selectedJobs">
            <label for="">{{ job.skuDescription }}</label>
        </td>
      </tr>
    </tbody>
  </table>
  <span>Checked jobs: {{ selectedJobs }}</span>
</div>