When clicking on root nodes, they don't open or close; the only needed modification to your example code is changing nodes from data to computed property:
I'm also getting console errors, though they don't show in codesandbox:
During initialization, once per root node: Uncaught (in promise) TypeError: node.value.state is undefined
When clicking on a root node: Uncaught TypeError: node.value.state is undefined
When I add state: {} to each node, the error disappears, but I still can't interact with root nodes.
When I add state: { opened: true } to each node, I still can't interact, but at least they are all initially open.
✔️ The solution is to explicitly open the nodes by using something like @node-toggle="(node: ItemType) => open[node.id] = !open[node.id]" and assign the state within computed property.
❗ We must duplicate id inside object, because the node's object key isn't available in event.
📔 (Adding @node-focus also lets us open the node by clicking on its name - I'd prefer the option to opt-in to this behavior even implicitly, without having to use state.)
User experience: de-focus, closing and opening a root node registers it as a double-click and selects text in children
I also have a major issue, making this component completely unusable: when there are many reactive changes to the elements, under some circumstances, I start receiving errors like these, for example when I click to expand a parent node (it won't expand):
Sadly, I was unable to reproduce this as a minimum repro project, as it only happens when I use the component in my existing, larger project (where I had previously used Vuetify 2's component), thus I don't know the root cause of this. There is a certain number of reactive updates that must be performed before the issue manifests, it doesn't happen under simple scenarios. I'm giving up on this component, hoping for Vuetify 3 to implement it soon.
When clicking on root nodes, they don't open or close; the only needed modification to your example code is changing
nodes
fromdata
tocomputed
property:I'm also getting console errors, though they don't show in codesandbox:
Uncaught (in promise) TypeError: node.value.state is undefined
Uncaught TypeError: node.value.state is undefined
When I add
state: {}
to each node, the error disappears, but I still can't interact with root nodes.When I add
state: { opened: true }
to each node, I still can't interact, but at least they are all initially open.✔️ The solution is to explicitly open the nodes by using something like
@node-toggle="(node: ItemType) => open[node.id] = !open[node.id]"
and assign the state within computed property.id
inside object, because the node's object key isn't available in event.@node-focus
also lets us open the node by clicking on its name - I'd prefer the option to opt-in to this behavior even implicitly, without having to usestate
.)User experience: de-focus, closing and opening a root node registers it as a double-click and selects text in children
I also have a major issue, making this component completely unusable: when there are many reactive changes to the elements, under some circumstances, I start receiving errors like these, for example when I click to expand a parent node (it won't expand):
Sadly, I was unable to reproduce this as a minimum repro project, as it only happens when I use the component in my existing, larger project (where I had previously used Vuetify 2's component), thus I don't know the root cause of this. There is a certain number of reactive updates that must be performed before the issue manifests, it doesn't happen under simple scenarios. I'm giving up on this component, hoping for Vuetify 3 to implement it soon.