How to get updated array

[Georgeek]

Hi!
How to get updated array after dragend? It seems that STORE from "ondragend" method return too much data. Is there any other simple way to retrieve updated array

initial data

data: [
              {text: 'node 4'},
              {text: 'node 4 undroppable', droppable: false},
              {text: 'node 5', children: [
                {text: 'node 1'},
                {text: 'node 2', children: [
                  {text: 'node 3'},
                  {text: 'node 4'},
       //ommited

ondragend STORE element of an updated Array

active:(...)
children:(...)
class:(...)
innerBackClass:(...)
innerBackStyle:(...)
innerClass:(...)
innerStyle:(...)
level:(...)
open:(...)
parent:(...)
style:(...)
text:(...)
_droppable:true
_id:"tree_5_node_wIU3u"

[phphe]

It modifies the original data. If you want pure data: store.pure(data, true)

[Georgeek]

what is data? is it a store.data?
tried couple of variants and console.log throw an error
key.startsWidth is not a function

also found a bug

testFunc(node, nodeVm, store) {
    console.log(node)
    console.log("dragged id", node.id, node.text)
    console.log("new parent id", node.parent.id, node.parent.text)

draggable-tree(:data="data" draggable crossTree :ondragend="testFunc")
// code omitted

when drag is finished it calls testFunc, console.log shows not new parent Id, but previous parent Id

[phphe]

It modifies the original data directly. So you can use the original data. If you want pure data, store.pure(the original data, true).
i will check this bug

[kimtrien]

File Tree.vue line 104

for (var _i = 0; _i < _arr.length; _i++) {
  var key = _arr[_i];

  if (key.startsWidth('_')) {
    delete t[key];
  }
}

startsWidth is wrong, please change startsWidth => startsWith

[wangchristine]

你好：
我也有類似的問題，我想取得原始的資料，下面是我的程式片段：

new Vue({
            el: '#tree',
            components: {Tree: vueDraggableNestedTree.DraggableTree},
            data: {
                treeData: [
                    {text: 'aa', id: 1},
                ],
                treeJson: "",
            },
            watch: {
                treeData: function(){
                    // 這邊我想要用 treeJson 來儲存原始的 treeData
                }
            },
            methods: {
                maxDroppableLevel2(node, nodeVm, store){
                    return node.level <= 2
                },
            },
})

請問 watch treeData 這邊應該如何取得原始的 treeData 呢?

[phphe]

@wangchristine please update to the latest version
add @change="treeChange" to the tree

new Vue({
            el: '#tree',
            components: {Tree: vueDraggableNestedTree.DraggableTree},
            data: {
                treeData: [
                    {text: 'aa', id: 1},
                ],
                treeJson: null,
            },
            methods: {
                treeChange(node, nodeVm, store) {
                  this.treeJson = store.pure(store.rootData, true).children
                },
            },
})

[phphe]

@wangchristine @Georgeek now we can use tree.getPureData() to get updated data.
@kjmtrue thanks

[NeoMarine]

As the tree.getPureData() command keeps the "innerBackStyle" etc. values in-tact, if you want to remove those as well you can use the following instead:

function stringifyTreeDataClean(v) { //Remove all non-needed properties from TreeData return JSON.stringify(v, function(name, value) { if (name === 'innerBackClass' || name === 'innerBackStyle' || name === 'innerClass' || name === 'innerStyle' || name === 'level' || name === 'open' || name === 'parent' || name === '_treeNodePropertiesCompleted' || name === '_id' || name === 'style' || name === 'active' || name === 'class' || name === '_droppable' || name === '_draggable' || name === '_vm'){ return undefined; } else { return value; } }); }

To use it, do something like this:
this.cleanTreeData = JSON.parse(stringifyTreeDataClean(this.treeData));

Now "this.cleanTreeData" will ONLY contain values you've added to it (nothing left remaining relevant to the tree itself).

[krodelabestiole]

new Vue({
            el: '#tree',
            components: {Tree: vueDraggableNestedTree.DraggableTree},
            data: {
                treeData: [
                    {text: 'aa', id: 1},
                ],
                treeJson: null,
            },
            methods: {
                treeChange(node, nodeVm, store) {
                  this.treeJson = store.pure(store.rootData, true).children
                },
            },
})

I had a "TypeError: Cannot read property 'pure' of null"

Changing the method to treeChange(node, store) did the trick.

Anyway I think you should document this on the main page.

[phphe]

new Vue({
            el: '#tree',
            components: {Tree: vueDraggableNestedTree.DraggableTree},
            data: {
                treeData: [
                    {text: 'aa', id: 1},
                ],
                treeJson: null,
            },
            methods: {
                treeChange(node, nodeVm, store) {
                  this.treeJson = store.pure(store.rootData, true).children
                },
            },
})

I had a "TypeError: Cannot read property 'pure' of null"

Changing the method to treeChange(node, store) did the trick.

Anyway I think you should document this on the main page.

I can't got it. do you mean tree.getPureData?

[krodelabestiole]

oh crap I'm sorry I hadn't got this function existed and was already documented.

the thing is I didn't knew about this "pure data" javascript thing. it might be helpful to some stupid like me just to mention that this function permit to retrieve the data and treat them.