How to Set Selected Children while Loading vuetify Treeview? - vuetify.js

Question

I am working with v-Treeview. I want to set already selected children while loading this tree view. To do this, I added items in array and used this array in v-model. But It's not working. I have following implementations:
<template>
<v-container>
<v-treeview
:items="checklist"
selectable
return-object
dense
hoverable
:v-model="selectedItemList"
/>
</v-container>
</template>
<script>
export default {
name: 'WTreeView',
props: {
// Checklist of the selected card
checklist: {
type: Array,
required: true,
},
},
data() {
return {
selectedItemList: [],
};
},
created() {
this.selectedItemList.push(this.checklist[0]);
},
};
</script>
For "checklist" I have data in the following format:
Now what is the best way to set already selected children while loading v-Treeview? Thank You.

Answer 1

When the vue is created, the data hasn't been filled into the controllers and neither the page is rendered.
You can consider setting the selected items in the mounted

Answer 2

I have been working on a similar issue for hours and finally figured out how to get it work.
First of all, v-treeview needs a separate array of ids to keep the track of selected items.
you should bind it to the value property.
Second, the timing you change the value property is critical. v-model would not load the initial values so you have to update the values after you render the page. In your code above, you set the selectedItemList in created(). But it is executed before the page is rendered. You should put it into mounted() instead.

Answer 3

I don't think you can achieve this "out of the box".
I recommend using the "label" slot to add your own v-checkbox and bind the v-model to the selected property on your check list item.
Something like:
<v-treeview :items="checklist">
<template v-slot:label="props">
<div class="treeCheckBox">
<v-checkbox class="treeCheckBox"
v-model="props.item.selected"
:label="props.item.name">
</v-checkbox>
</div>
</template>
</v-treeview>
Then all you need to do is ensure the "selected" property is set appropriately against the check list items when the data is bound to the tree view.
For more info on the using the named slot, see https://vuetifyjs.com/en/components/treeview and https://v2.vuejs.org/v2/guide/components-slots.html
In version 1.5x of veutify you may encounter spacing issues. I was able to fix this by applying the following styles to my check box and outer div:
.treeCheckBox{
margin-top: 0px;
max-height: 30px;
}