1<template> 2 <v-btn 3 block 4 type="button" 5 class="my-5" 6 @click="revertAllSelection" 7 > 8 {{ selectAllText[selectAll] }} 9 </v-btn> 10 <v-row class="mb-5"> 11 <v-col 12 v-for="label in labels" 13 :key="label" 14 cols="12" 15 md="4" 16 > 17 <input 18 type="checkbox" 19 :value="label" 20 :checked="modelValue.get(label)" 21 @change="updateSelected($event.target.value)" 22 > 23 <label v-if="label"> {{ label }} </label> 24 </v-col> 25 </v-row> 26</template> 27 28<script> 29export default { 30 props: { 31 labels: { 32 type: Array, 33 default: new Array(), 34 }, 35 modelValue: { 36 type: Map, 37 default: new Map(), 38 }, 39 }, 40 data() { 41 return { 42 selectAll: 1, 43 selectAllText: ['Select All', 'Unselect All'], 44 } 45 }, 46 mounted() { 47 // Set the default value to be true once mounted 48 for (let key of this.labels) { 49 this.modelValue.set(key, true) 50 } 51 }, 52 methods: { 53 updateSelected(newSelect) { 54 this.modelValue.set(newSelect, !this.modelValue.get(newSelect)) 55 this.$emit('update:modelValue', this.modelValue) 56 }, 57 revertAllSelection() { 58 this.selectAll = 1 - this.selectAll 59 for (let key of this.modelValue.keys()) { 60 this.modelValue.set(key, Boolean(this.selectAll)) 61 } 62 }, 63 }, 64} 65</script> 66 67<style scoped> 68ul > li { 69 display: inline-block; 70 list-style-type: none; 71 margin-left: 5%; 72 margin-right: 5%; 73 top: 0px; 74 height: 50px; 75} 76</style>