I'm having trouble preselecting checkboxes within a v-list-item-group. I can't seem to figure out what the true-value should be set to in order for the checkbox to be checked.
I've also attempted changing the value of true-value to column.value, but that didn't work either.
Unlike most examples I've come across, the model for this v-list-item-group consists of an array of objects instead of primitives like usual.
In the provided code snippet example (unfortunately, couldn't get it to run in the sandbox), "Column 2" is supposed to be preselected.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
defaultColumns: [{
value: 'column1',
text: 'Column 1',
},
{
value: 'column2',
text: 'Column 2',
},
{
value: 'column3',
text: 'Column 3'
},
],
selectedColumns: [{
value: 'column2',
text: 'Column 2',
}],
}),
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.2.13/vuetify.js"></script>
<div id="app">
<v-app>
<v-list>
<v-subheader>
Select columns
</v-subheader>
<v-list-item-group v-model="selectedColumns" multiple>
<v-list-item v-for="column in defaultColumns" :key="column.value" :value="column">
<template v-slot:default="{ active, toggle }">
<v-list-item-action>
<v-checkbox
:input-value="active"
:true-value="column"
color="primary"
@click="toggle"
/>
</v-list-item-action>
<v-list-item-title>
{{ column.text }}
</v-list-item-title>
</template>
</v-list-item>
</v-list-item-group>
</v-list>
</v-app>
</div>