Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(VTreeview): Load children when expanded #20364

Merged
merged 1 commit into from
Aug 29, 2024
Merged

Conversation

J-Sek
Copy link
Contributor

@J-Sek J-Sek commented Aug 20, 2024

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>

@yuwu9145 yuwu9145 added T: bug Functionality that does not work as intended/expected C: VTreeview VTreeview labels Aug 21, 2024
@yuwu9145 yuwu9145 added this to the v3.7.x milestone Aug 21, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
C: VTreeview VTreeview T: bug Functionality that does not work as intended/expected
Projects
None yet
2 participants