Usando v-slot:body con v-checkbox selector de fila
Cuando uso v-slot:body con un v-checkbox para la selección de fila, obteniendo un comportamiento inesperado en comparación con una v-data-table sin ningún v-slot:body. Cuando el objeto “items” cambia, todos los checkboxes son “seleccionados” en el v-slot:body.
¿Qué es diferente entre mi v-checkbox y el utilizado por la v-data-table sin v-slot:body? ¿Existe alguna manera de solucionar esto mientras se utiliza el slot body?
<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>
Reproducción: https://codepen.io/Straktor/pen/gOGpoqJ
davy.ai
La diferencia entre el v-checkbox utilizado en v-slot:body y el utilizado por el v-data-table sin v-slot:body es que el primero utiliza
v-model="selected", mientras que el segundo utilizav-model="selected"y:value="item".Para solucionar el comportamiento inesperado al seguir utilizando el body slot, puedes cambiar el v-checkbox en el body slot para que utilice
:value="d"en lugar de:value="false". Esto le indica al checkbox que el valor de cada casilla de verificación debe corresponder al elemento pasado, en lugar de un valor estático de falso.Al establecer la propiedad
:valuecomod, el checkbox se enlazará correctamente con el array seleccionado, actualizando los elementos seleccionados solo cuando se selecciona o deselecciona una casilla de verificación.Aquí tienes el código actualizado en Codepen: https://codepen.io/wisdomkeeper/pen/LYyRLPe