Using v-slot:body with v-checkbox row selector-CodePudding

When using v-slot:body with a v-checkbox for the row selection I am getting an unexpected behavior compared to a v-data-table without any v-slot:body. When the "items" object changes all the checkboxes are "selected" in the v-slot:body.

What is different from my v-checkbox and the one used by the v-data-table without v-slot:body? Is there a way to fix this while still using the body slot?

<v-data-table
  v-model="selected"
  :headers="headers"
  :items="desserts"
  item-key="name"
  show-select
  dense
  hide-default-footer
  class="elevation-1"
>
  <template v-slot:body="{ items }">
    <tbody>
      <tr v-for="d in items" :key="d.name">
        <td>
          <v-checkbox
            v-model="selected"
            :value="d"
            style="margin:0px;padding:0px"
            hide-details>
          </v-checkbox>
        </td>
        <td>{{ d.name }}</td>
        <td>{{ d.calories }}</td>
      </tr>
    </tbody>
  </template>
</v-data-table>

Reproduction:

Instead of individual item slot. In body's slot you need to pass the item to these functions. So, in order to work with your v-checkbox. Configure them this way. We start removing the v-model value you used since that is managed by the data table. Then we pass our item d the one you defined in your v-for to the selection functions.

<v-checkbox
   :input-value="isSelected(d)"
   style="margin:0px;padding:0px"
   color="#535353"
   hide-details
   @click="select(d,!isSelected(d))"
>                   
</v-checkbox>

Here's your example codepen working properly: https://codepen.io/cmfc31/pen/VwMvYpy?editors=1010

CodePudding user response：

You forgot to define v-checkbox input as multiple, to allow processing of the bound model accordingly.

<v-checkbox
  v-model="selected"
  multiple
  :value="d" 
  style="margin:0px;padding:0px"
  hide-details></v-checkbox>