he-tree-vue icon indicating copy to clipboard operation
he-tree-vue copied to clipboard

Update node from walkTreeData

Open marco-viewpoint opened this issue 4 years ago • 5 comments
trafficstars

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!

marco-viewpoint avatar Mar 12 '21 15:03 marco-viewpoint

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

phphe avatar Mar 14 '21 10:03 phphe

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 avatar Mar 15 '21 20:03 marco-viewpoint

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.

marco-viewpoint avatar Mar 15 '21 21:03 marco-viewpoint

you can try

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

phphe avatar Mar 16 '21 00:03 phphe

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.

marco-viewpoint avatar Mar 16 '21 15:03 marco-viewpoint