Bug with computed tree

[krodelabestiole]

// UPDATE : you can read only the next message that is mode relevant

hi, and thanks for the great component !

I have a strange bug : when dragging I don't have any placeHolder showing, and when dropping nothing changes place.

The JS console doesn't show any error until drop then, when dropping on Firefox :

TypeError: dplh._vm is undefined
drop vue-draggable-nested-tree.es.js:1245
drop draggable-helper.es.js:185
wrapper drag-event-service.es.js:55

and on Chrome :

Uncaught TypeError: Cannot read property 'store' of undefined
    at Object.drop (vue-draggable-nested-tree.es.js?b1f6:1245)
    at drop (draggable-helper.es.js?f2fc:185)
    at wrapper (drag-event-service.es.js?32db:55)

I tried to reproduce the bug for the purpose of this message on codepen and ... it works perfectly :/ https://codepen.io/krodelabestiole/pen/PxXveP

I was wondering if it has something to do with styles so I disabled every style with firefox, and it still works perfectly in codepen, and not in my app...

So I guess it might be incompatible with some library I am using or any variable name I gave that conflict with vdnt (a quick search shows I'm not using store, data nor vm)

Here are my dependencies in case it might be relevant :

    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuetify": "^1.3.0",
    "vuex": "^3.0.1"
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.1",
    "@vue/cli-service": "^3.1.1",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "clone-deep": "^4.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.10.0",
    "normalizr": "^3.3.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-axios": "^0.0.4",
    "vue-cli-plugin-vuetify": "^0.4.6",
    "vue-draggable-nested-tree": "^2.2.2",
    "vue-template-compiler": "^2.5.17",
    "vuetify-loader": "^1.0.5"

[krodelabestiole]

ok I found the issue had something to do with data vs computed tree : (and I lied a bit, I wasn't using the exact same code on codepen)

this works :

data () {
    return {
        pages: {
            menu: [
                { title: 'wesh' },
                { title: 'io',
                    children: [{ title: 'poussin' }]
                }
            ]
        }
    }
}

and this doesn't :

computed: {
    pages() {
        return {
            menu: [
                { title: 'wesh' },
                {
                    title: 'io',
                    children: [{ title: 'poussin' }]
                }
            ]
        }
    }
}

unfortunately a search with "computed" in the issues doesn't show any other case...

I have updated my issue on codepen and this time I can reproduce my issue : https://codepen.io/krodelabestiole/pen/qQLeEq

[krodelabestiole]

...and I finally could resolve my issue with something like this :

data () {
    return {
        pages: cloneDeep(this.$store.state.tree)
    }
},
computed: {
    storeTree() {
        return cloneDeep(this.$store.state.tree)
    }
},
watch: {
    storeTree(newValue) {
        this.pages = newValue
    }
}

this way I'm watching the store for changes, and re clone the tree if need

feel free to close if you don't need the tree to work as a computed property, and congrats for this great component :)

[phphe]

if you want to change tree data, you can traverse it and change node directly. My another library tree-helper is recommend to traverse tree data: https://github.com/phphe/tree-helper

[krodelabestiole]

Thanks @phphe , it's ok like that, no need for an extra library. I think my issue was more relative to VueJS in general than with your component specifically.