vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

fix(VTreeview): Load children when expanded

Open J-Sek opened this issue 6 months ago • 0 comments

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>

J-Sek avatar Aug 20 '24 13:08 J-Sek