Suppose i have variable items structured like below:
[
{
id: 1,
name: 'value1',
item_nested: [
{
id: 2,
name: 'value2',
},
{
id: 3,
name: 'value3',
nested_item: [
{
id: 4,
name: 'value4'
}
]
}
]
}
]
In v-treeview we have props item-children that take string, it allow to set withc property will be taken as children reference. on the first level i want the property item_nested as children and the second level i want nested_item as children, but is it possible to set multiple value for item-children?
VTreeView uses a single string as key for the children, so - without extending / overwriting the original component - I don't see a way to feed it alternative keys for children.
But, you can always "re-key" the object you want to display in a VTreeview (this snippet only works in this specific case, but it could be generalized):
new Vue({
el: '#app',
vuetify: new Vuetify(),
computed: {
// "re-keying" items:
modifiedTreeviewItems() {
const updateItemKeys = (items) => {
if (!items.length) return []
const mapped = items.map((item) => {
const {
item_nested = [], nested_item = [], ...rest
} = item
const children = item_nested.length ? item_nested : nested_item.length ? nested_item : []
return {
...rest,
children: updateItemKeys(children),
}
})
return mapped
}
return updateItemKeys(this.treeviewItems)
},
},
data() {
return {
treeviewItems: [{
id: 1,
name: 'value1',
item_nested: [{
id: 2,
name: 'value2',
},
{
id: 3,
name: 'value3',
nested_item: [{
id: 4,
name: 'value4'
}]
}
]
}]
}
},
})<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container>
<v-treeview :items="modifiedTreeviewItems" />
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>