vuetify datatable header checkbox select all

Solutions on MaxInterview for vuetify datatable header checkbox select all by the best coders in the world

showing results for - "vuetify datatable header checkbox select all"
09 Oct 2018
1<!DOCTYPE html>
2<html>
3
4<head>
5  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
6  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
7  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
8  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
9</head>
10
11<body>
12  <div id="app">
13    <v-app>
14      <v-content>
15        <v-container>
16          <h2>Data Table</h2>
17
18          <v-data-table v-model="selectedTasks" :headers="headers" :items="tasks" item-key="id" show-select>
19
20            <template v-slot:body="{ items }">
21            <tbody>
22                <tr v-for="item in items" :key="item.id">
23                    <td>
24                        <v-checkbox v-model="selectedTasks" :value="item" style="margin:0px;padding:0px"
25                            hide-details />
26                    </td>
27                    <td>{{ item.text }}</td>
28                    <td>
29                        <v-btn text icon x-small>
30                            Edit
31                        </v-btn>
32                    </td>
33                </tr>
34            </tbody>
35            </template>
36          </v-data-table>
37        </v-container>
38      </v-content>
39    </v-app>
40  </div>
41
42  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
43  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
44  <script>
45    new Vue({
46      el: '#app',
47      vuetify: new Vuetify(),
48
49      data() {
50        return {
51          headers: [{
52              text: 'task',
53              value: 'text'
54            },
55            {
56              text: 'actions'
57            }
58          ],
59          selectedTasks: []
60        }
61      },
62      computed: {
63        tasks() {
64          return [{
65              id: 1,
66              text: 'Collect packets'
67            },
68            {
69              id: 2,
70              text: 'Buy bread'
71            }
72          ]
73        }
74      }
75    })
76  </script>
77</body>
78
79</html>