Vuetify data table issue after upgrading to new version like ^3.5.2 when enabled show-select

by 
<v-data-table
 v-show="!recordsLoading"
 :headers="headers"
 :items="records"
 item-value="id"
 hide-default-footer
 disable-sort
 class="elevation-1 align-top"
 show-select
 calculate-widths
 return-object
 :page.sync="subsCurrentPage"
 :items-per-page="perPage"
 v-model="selectedRecords"
 >
   <template v-slot:item.data-table-select="{ item, isSelected, toggleSelect }">
     <v-checkbox-btn
       hide-details
       :modelValue="isSelected(item)"
       @update:modelValue="toggleSelect(item)"
     ></v-checkbox-btn>
   </template>
   
</v-data-table>

Previously above code worked without any issue when vuetify version 3.4 (like v3.4.7). But after upgrading it to version 3.5 (like v3.52) there is an issue on data table if we have called toggleSelect() with in the v-slot:item.data-table-select.

Issue : when we select on checkbox all the check boxes are getting selected as we click on the select all check box.

Solution: we have to change two lines.

1.) :modelValue="isSelected(item)" to :modelValue="isSelected({ value:item })

2.)@update:modelValue="toggleSelect(item)"
to
@update:modelValue="toggleSelect({ value:item })"

Leave a Comment