Select all rows of a Vuetify data table with custom table body implementation
Data table v-model needs to be set to selectedItems and check box for selecting needs to have value of item collection.
<!DOCTYPE html><html><head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></head><body> <div id="app"> <v-app> <v-content> <v-container> <h2>Data Table</h2> <v-data-table v-model="selectedTasks" :headers="headers" :items="tasks" item-key="id" show-select> <template v-slot:body="{ items }"> <tbody> <tr v-for="item in items" :key="item.id"> <td> <v-checkbox v-model="selectedTasks" :value="item" style="margin:0px;padding:0px" hide-details /> </td> <td>{{ item.text }}</td> <td> <v-btn text icon x-small> Edit </v-btn> </td> </tr> </tbody> </template> </v-data-table> </v-container> </v-content> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script> new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { headers: [{ text: 'task', value: 'text' }, { text: 'actions' } ], selectedTasks: [] } }, computed: { tasks() { return [{ id: 1, text: 'Collect packets' }, { id: 2, text: 'Buy bread' } ] } } }) </script></body></html>