vuetify
vuetify copied to clipboard
fix(VTreeview): Load children when expanded
Description
resolves #20360
Markup
<template>
<v-container>
<p>Click exactly the icon to verify</p>
<v-treeview
v-model:activated="active"
v-model:opened="open"
:items="items"
:load-children="fetchUsers"
density="compact"
item-title="name"
item-value="id"
activatable
open-on-click
/>
</v-container>
</template>
<script setup>
import { computed, ref } from 'vue'
const active = ref([])
const open = ref([])
const users = ref([])
const items = computed(() => {
return [
{
name: 'Users',
children: users.value,
},
]
})
async function fetchUsers(item) {
await new Promise(r => setTimeout(r, 1500))
return fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(json => item.children.push(...json))
.catch(err => console.warn(err))
}
</script>