Is there a way to customize the view of our V-treeview by filtering what is displayed? By entering the beginning of an element key in the filter field input, the tree will only show elements whose keys match the input.
I am working on Vue.js with the latest version of Vuetify. I have checked the Vuetify page but haven't found a solution yet: Vuetify Treeview
There are two remaining issues: I can only filter the first level children of my treeview, not the nested children. Also, when a child is matched, other nodes are not hidden.
HTML
<div id="app">
<v-app id="inspire">
<v-treeview :selectable="true"
:items="items"></v-treeview>
</v-app>
</div>
JS
new Vue({
el: '#app',
computed: {
itemsComputed() {
return this.items.filter(v => {
let regexp = new RegExp(`^${this.search}`, "i")
return v.name.match(regexp)
|| v.children.find(v => v.name.match(regexp))
})
}
},
data: () => ({
search: "",
items: [
{
id: 1,
name: 'Applications :',
children: [
{ id: 2, name: 'Calendar : app',
children: [
{
id: 3, name: 'Chrome : app'
},
{
id: 4, name: 'Webstorm : app'
}
]},
]
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [
{ id: 8, name: 'index : ts' },
{ id: 9, name: 'bootstrap : ts' }
]
}
]
},
{
id: 10,
name: 'material2 :',
children: [
{
id: 11,
name: 'src :',
children: [
{ id: 12, name: 'v-btn : ts' },
{ id: 13, name: 'v-card : ts' },
{ id: 14, name: 'v-window : ts' }
]
}
]
}
]
},
{
id: 15,
name: 'Downloads :',
children: [
{ id: 16, name: 'October : pdf' },
{ id: 17, name: 'November : pdf' },
{ id: 18, name: 'Tutorial : html' }
]
},
{
id: 19,
name: 'Videos :',
children: [
{
id: 20,
name: 'Tutorials :',
children: [
{ id: 21, name: 'Basic layouts : mp4' },
{ id: 22, name: 'Advanced techniques : mp4' },
{ id: 23, name: 'All about app : dir' }
]
},
{ id: 24, name: 'Intro : mov' },
{ id: 25, name: 'Conference introduction : avi' }
]
}
]
})
})