I am trying to preselect checkboxes in a v-list-item-group
, but can't for the life of me figure out what true-value
should be set to in order for it to check the checkbox.
I have also tried changing the value of true-value
to column.value
, to no avail.
As opposed to most examples I have found, the model for this v-list-item-group
is an array of objects, as opposed to primitives that seem to be the norm.
In the code snippet example provided (sorry, couldn't manage to make it run in the sandbox), "Column 2" should 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>