My v-treeview has a node with approximately 2000 children, and I am in need of applying a filter to it. However, the current issue is that opening the node takes around 3 seconds, while closing it takes about 15 seconds, which is completely unacceptable.
When the filter is not applied, both opening and closing the node are nearly instantaneous, and it seems that closing the node does not trigger the filter function again.
This problem can easily be reproduced using the Searching a Directory example as a reference.
You can find the CodePen demonstration here: https://codepen.io/james-hudson3010/pen/JjXYgZj
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
max-width="500"
>
<v-sheet class="pa-4 primary lighten-2">
<v-text-field
v-model="search"
label="Search Company Directory"
dark
flat
solo-inverted
hide-details
clearable
clear-icon="mdi-close-circle-outline"
></v-text-field>
<v-checkbox
v-model="caseSensitive"
dark
hide-details
label="Case sensitive search"
></v-checkbox>
</v-sheet>
<v-card-text>
<v-treeview
:items="items"
:search="search"
:filter="filter"
:open.sync="open"
>
</v-treeview>
</v-card-text>
</v-card>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{
id: 1,
name: 'Vuetify Human Resources',
children: [
{
name: 'Core team',
children: [
{ id: 2, name: 'John-0' },
{ id: 3, name: 'John-1' },
{ id: 4, name: 'John-2' },
{ id: 5, name: 'John-3' },
{ id: 6, name: 'John-4' },
{ id: 7, name: 'John-5' },
//
// Some items removed due to length
//
{ id: 2000, name: 'John-1998' },
{ id: 2001, name: 'John-1999' },
],
}
],
},
],
open: [1, 2],
search: null,
caseSensitive: false,
}),
computed: {
filter () {
return this.caseSensitive
? (item, search, textKey) => item[textKey].indexOf(search) > -1
: undefined
},
},
})