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?

I'm not sure you can set javascript object as input.value.

apple apple
– apple apple

2019-05-06 15:31:21 +00:00
Commented May 6, 2019 at 15:31 — apple apple
– apple apple, Commented May 6, 2019 at 15:31

Steven B. · Accepted Answer · 2019-05-06 16:56:50Z

3

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>

edited May 6, 2019 at 16:56

answered May 6, 2019 at 16:31

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

aCarella Over a year ago

Thanks for responding. I'm having trouble understanding how to implement this in my table in the example I provided in the question. Could you tweak your answer to how I have my template set up? Let me know if you need additional information.

Steven B. Over a year ago

@aCarella I updated it to a table structure. Was there something specific you didn't understand?

aCarella Over a year ago

I think the <div>s just threw me off and I was having trouble understanding how to implement in a table.

geeksalah Over a year ago

@StevenB. how can I pre-check a checkbox (in case I want to populate the checkobxes from database). For example the following doesn't work.

selectedJobs: [ { rplFrom: '[email protected]', replenTo: '[email protected]', sku: 1, description: '11111', unitsToReplenish: 33 } ]

Steven B. Over a year ago

@geeksalah you need to use the same instance of the object. In the created hook you could do this.selectedJobs.push(this.compJobsList[0]); and it would work. See this fiddle.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related