Vue js Keeping track of selected checkboxes in scoped slot


I have a table where i am trying to add a checkbox control to each row via a slot. The problem is I cant figure how to record the selected items in the parent component when they are selected… v-model doesnt seem to work.

I modified a codepen to show what im trying to achieve…


Your codepen seems to work as expected. The selected property is updating with an array of the selected objects. Can you explain the problem a bit more?

One minor issue, your console was full of "Property or method "index" is not defined...". Inside Table.vue you need to replace

      <tr v-for="item in data">


      <tr v-for="(item, index) in data">


Instead of using v-model I would use the :value-property and an data-change-event handler (i.e. Input or Click).

As for the :value you could use a computed property to check if the current object index is stored in the selected array. And for the event handler simply push or remove the clicked object id to/from the selected array…


thanks for replying… i had actually found the problem in that the data attribute didnt match the v:model… i must have saved the Pen… d’oh!


twp, why would you prefer to do it that way?.. from reading the docs it seems that the way they recommend is to use v-modal to bind multiple checkboxes…


Sorry, I didn’t know that v-model also works in this way.
Time to optimize some of my code now :nerd_face:


haha… its a pretty awesome feature