Comments (6)
One way: Store parent ID in node and use getMatching( (id) => parentID === id )
, set state and repeat all along the parent chain. Not so satisfying in terms of resource usage
from vue-tree.
TL;DR, the tree has always only had one-way navigation, downward. There's not much of a reason for that except that I hadn't yet had a need for parent hierarchy references (ironically, until last Friday). As part of The Great Refactoring I'm going to add more/better iteration over the tree and expose those methods, but for now I've had to take an approach of:
- Add the parentId to the nodes (it's actually already in my data set, and it looks like you have that under control for yours)
- Operate directly against the tree model object to find the hierarchy to the desired node (I think I based the work off of these SO answers, but the implementation I'm thinking of is on my work device and not close at hand). So basically handle the checked event, traverse the hierarchy to find the node, and do work on the ancestors on the way back up.
As you saw, getMatching
is only so much help and ends up repeating work, though yeah it can technically do the job. The good(?) news is that anything I write and expose for 5.x can easily go into 3.x as well since the actual data structures haven't changed in a significant way.
First, a suggestion: If the parent is not meant to be accessed as I was doing it, maybe make a copy of it before injecting it as parameters, so that one cannot successfully modify
parent.treeNodeSpec.state.input.value
and get away with it! Well you might also as well keep it like this since it works...
Nope, go ahead and mess with that data to your heart's content.
Problem is I think these circular reference cause a bug
Yeah, Vuex hates that. :) It's been a while since I worked against Vuex, I can't remember any way to make it so the store contains the model without the parent node references but then rehydrates those when it's read from the store. If you think of one please let me know, now I'm curious.
from vue-tree.
Well, if I follow the current best SO answer well, storing the parent ID is not necessarily needed since upon searching a node, the IDs of all traversed nodes are accumulated.
This solution makes total sense once you think about it, lol. Having each node referencing their parent just is more convenient, and avoid top-down navigation each time. I guess for my use case this could work tho. I have yet to try. Thanks for the answer and the SO pointer.
from vue-tree.
OK so I close here, I think I will take the "find node keeping traversed path" approach.
- Recursively find a node, recording its path (list of parent nodes IDs)
- Use list of parent nodes IDs to access each parent - probably with
getMatching( (id) => parentID === id )
- to toggle selection
No idea how getMatching
is implemented, but I imagine it will traverse again the tree - what is done in (1) already - to find each parent based their IDs. Maybe 1 can store reference to nodes instead of just IDs, then 2 does not need to happen (?) - I will try this.
Also - in v5 - it would be cool to have:
- a better node API, like
node.expand()
,node.reload()
,node.check()
,node.select()
, etc. so that we don't necessarily have to dig into the objects - a
tree.getPath(nodeId)
that either return nodeIds or node references to use with the node API
But again, not sure how easy it is to provide considering the lib handles more than just the use case I have in mind rn!
Also - unrelated - I love the scoped slot approach to fully customise the node html!
Anyways, thank you again!
from vue-tree.
Sounds good. And yeah, part of what I'm working on right now for 5.x is a refactor into composables for a lot of the concerns (selection, focus, etc) which has already simplified a good chunk of the internals from the just-keep-tacking-stuff-onto-mixins approach that existed before. One of the main things I want out of that is a better API both for interacting with nodes and for traversing the tree.
I should also note that there was a 5.x enhancement for getMatching
to add a parameter for max matches to allow it to short-circuit the tree traversals, for instance if you were looking for the one parent node by ID. If you want, I can pretty trivially add that to 3.x for you. Just put in an enhancement issue for it if you think it'd be nice to have!
from vue-tree.
Thanks for the details. Good to know, I will spawn a new issue when and if needed in this case :)
Yeah, I also can't wait to be using the composition API but the codebase I am working on needs to be migrated... That's not going to be an easy task ^^
from vue-tree.
Related Issues (20)
- Cannot use modelDefault in v3.0.4 HOT 4
- How to change the behavior of click on node (v3.0.4) HOT 9
- Add the ability to reload async child nodes
- Change expanding behavior to trigger from a watch on the expanded attribute
- Add examples of CSS import from the package in the documentation examples HOT 2
- Use $attrs instead of onMounted when generating tree ID based off of a provided id attribute
- Change traversal methods to iterable walker functions
- Nodes with loadChildrenAsync and expanded:true do not expand on init (v3.0.5) HOT 12
- Expandable node with async loaded children should remain expandable when empty HOT 2
- How to listen to events correctly? HOT 3
- Refactor composables by concern
- Support for filtering HOT 7
- Single selection mode does not work with customised id property name HOT 3
- treeNodeSelectedChange API improvement? HOT 4
- Update traversal to allow post-order traversal
- See if objectMethods.js can be replaced with structuredClone
- Cancel a node deletion HOT 3
- Have the ability to cancel a delete HOT 2
- Upgrade Storybook to 7.x
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-tree.