Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Update node from walkTreeData #48

Open
marco-viewpoint opened this issue Mar 12, 2021 · 5 comments
Open

Update node from walkTreeData #48

marco-viewpoint opened this issue Mar 12, 2021 · 5 comments

Comments

@marco-viewpoint
Copy link

I'm trying to walk the tree and update nodes.

I tried using code I found for earlier versions, but it doesn't seem to work anymore with Vue 3 / he-tree-vue 3.0.0.

Trying to use this.$set() results in this error:

TypeError: _this2.$set is not a function
    at eval (ModelTreeView.vue?98ec:35)
    at func (helper-js.esm.js?0fa5:889)
    at depthFirstSearch (helper-js.esm.js?0fa5:907)
    at TreeData.walk (helper-js.esm.js?0fa5:1145)
    at walkTreeData (he-tree-vue.esm.js?94dd:20)
    at Proxy.walkTreeData$1 (he-tree-vue.esm.js?94dd:193)
    at Proxy.showHidden (ModelTreeView.vue?98ec:34)
    at eval (Model.vue?1751:225)

I prepared a sandbox to reproduce the issue. Please click "Hide" or "Show hidden" to trigger it:
https://codesandbox.io/s/vue-cli-and-he-tree-vue-example-forked-xv1ww?file=/src/components/TreeView.vue

How can I walk through all the nodes of the tree and update their attributes?

Thank you for your help and this amazing component!

@phphe
Copy link
Owner

phphe commented Mar 14, 2021

hello
$set is deprecated in Vue3. So you can assign to variables directly.

@marco-viewpoint
Copy link
Author

Thanks!

That's actually what I tried first, but it didn't affect the tree.

Trying it now in the sandbox works, so I have to find what's different in my main program that results in changing the nodes during the walkTreeData not to have any effect.

@marco-viewpoint
Copy link
Author

Ok, the issue is setting the tree data and then immediately walking and updating the tree doesn't work.
e.g.:
https://codesandbox.io/s/vue-cli-and-he-tree-vue-example-forked-xv1ww?file=/src/App.vue

I'm trying to load the tree data from an API and then supplementing it with he-tree-vue specific attributes like "$draggable" depending on node attributes.

I should probably just traverse the JSON object before applying it to the tree and sidestep the issue that way.
walkTreeData just looked like the easier way to do it.

@phphe
Copy link
Owner

phphe commented Mar 16, 2021

you can try

import {walkTreeData } from 'he-tree-vue'

@marco-viewpoint
Copy link
Author

Thank you, I tried, but it didn't make a difference.
walkTreeData works fine, it's just that none of the changes are applied.

I would have guessed it's some form of concurrency issue. New tree data is applied as step 1 and while the tree is still locked I'm walking it as step 2 and trying to change it, but the changed nodes can't be merged back? Not sure.
I would have expected the nodes I get in walkTreeData are probably references and I can change those, so that's odd, but after I walked the whole tree the data is back to the state of step 1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants