Context

This is my first blog post here, so I wanted to keep it short and talk about a bug that I came across quite recently in Vuetify TreeView when using Async child loading.

This is, however, a workaround - for the people, like me, who need to push this now without opening a PR - and not a fix for the bug, so keep that in mind.

Recreating The Bug

Let's start with the code found on the vuetify component page found here: https://v15.vuetifyjs.com/en/components/treeview#async-items.

However, when I do push the children of the item, something like this happens:

TypeError: Cannot set property 'vnode' of undefined
    at a.register (VTreeview.js:257)
    at a.created (VTreeviewNode.js:132)
....

After a long session of debugging (not really I just open Chrome DevTools and set a breakpoint "at a.register (VTreeview.js:257)" and read the problem description on this StackOverflow here:

https://stackoverflow.com/questions/57293198/vuetify-treeview-error-loading-children-asynchronously/58396813#58396813

Vuetify basically tries to find a node in the nodes objects with key equal to the id of the child node, the child node, however, has no entry on this object hence the error.

Given the timeline I had and the need to push this ASAP:

My Just-Hack-it-For-Now Part of Brain: Then just create one.
Me: Aha.
My Just-Hack-it-For-Now Part of Brain: Yeah.

So that's exactly what I did.

in the fetchUsers function we can add a few lines for this before pushing the items the parent's children array.

const key = item.id
const parentNode = this.$refs.treeReference.nodes[key]

let childNode;
children.forEach((child) => {
  childNode = {...parentNode, item: child, vnode: null}
  this.$refs.treeReference.nodes[child.id] = childNode
})

First, let's get the ParentNode - which we are going to clone for the child - using the key item.id from nodes object in the tree.

Then for each child just clone the parentNode setting item to the child however and vnode to null.

This fixes it for me; code pushed and everyone is happy.

Please let me know if you have a less hacky solution for this, I'd really appreciate it.