Vue js Keeping track of selected checkboxes in scoped slot


#1

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…


#2

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">

with

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

#3

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…


#4

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!


#5

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…


#6

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


#7

haha… its a pretty awesome feature