holiber/sl-vue-tree

Lost old data after toggle visibility

kossa opened this issue · 9 comments

kossa commented

Hello,

I have a categories system, with : id, name, parent_id, visible_on_menu

I put the name into title, id and visible_on_menu under data, the problem is once I update the visibility I lost the id
I'm using this : https://github.com/holiber/sl-vue-tree/blob/master/demo/dark-theme.html#L134

kossa commented

image

Thanks for reporting this

I can't find any issues here. How do you update your data field?
If you're using updateNode method, keep in mind that it doesn't patch the node recursively. It simply updates the node with Object.assign(nodeModel, patch); - line 650

kossa commented

I using the code on the demo, currently I added manualy the id slVueTree.updateNode(node.path, {data: { visible: visible, id: node.data.id}}); :

  ...
    toggleVisibility: function (event, node) {
        const slVueTree = this.$refs.slVueTree;
        event.stopPropagation();
        const visible = node.data && node.data.visible !== true;
        slVueTree.updateNode(node.path, {data: { visible: visible, id: node.data.id}});

        console.log('Toggle visible', node.data.id, visible);
      },

Just tested this code in test_toggle_visibility branch. It works for me. Are you up to date with the last version?

kossa commented

Alright you have to add the id manually :)

c988258#diff-ecfbcb1c4778b2fc8a2fb4165903478eR138

kossa commented

Each time you change the visible property, you have to add all others data, for now I fixed the issue like that

Yes, there is no special method to patch the data field, you can only replace the whole object. In spite of this, you always have an old data object in the function's arguments. Just use spread syntax or Object.assign for convenience

    toggleVisibility: function (event, node) {
        ....
        slVueTree.updateNode(node.path, {data: { ...node.data, visible: visible}});
        ....
      },
kossa commented

Great thank you for help, I'm very happy that the plugin was integrated successfully with lazychaser/laravel-nestedset