I have a v-treeview where a node contains ~2000 children. I need to apply a filter. Opening the node currently takes ~3 seconds. Closing the node takes ~15 seconds. This is unacceptable.
Without the filter applied, opening and closing it nearly instantaneous. Closing the node does not appear to call the filter function again.
The problem is trivially reproducible using the Searching a Directory example as the base.
I have a CodePen 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
},
},
})