phphe / vue-draggable-nested-tree

Vue2 draggable tree component
https://hetree.phphe.com/
MIT License
344 stars 62 forks source link

Source Data from vuex #76

Closed Simpey closed 5 years ago

Simpey commented 5 years ago

Hi, I'm trying to use vuex to put data into your component, but unfortunately I get following errors:

Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."(found in )

Error: [vuex] do not mutate vuex store state outside mutation handlers.

<DraggableTree :data="dashboardMenu" draggable="draggable" :cross-tree="true" @drag="ondrag" ref="tree1" @change="treeChange">
            <template slot-scope="{data, store}">
                <dfd-accordeon
                        :title="data.menuTitle"
                        :url="data.menuUrl"
                        :children="data.children"
                        :iconClass="data.menuIcon"
                        @remove-menu-item="removeNode"
                        @save-menu-item="saveNode"
                >
                </dfd-accordeon>
            </template>
        </DraggableTree>
 computed: {
            dashboardMenu: get('wpDashboard/originalMenu')
        },
    methods: {
            treeChange(node, targetTree) {
                this.data = targetTree.getPureData()
            },
            ondrag(node) {
                const {maxLevel} = this
                let nodeLevels = 1
                th.depthFirstSearch(node, (childNode) => {
                    if (childNode._vm.level > nodeLevels) {
                        nodeLevels = childNode._vm.level
                    }
                })
                nodeLevels = nodeLevels - node._vm.level + 1
                const childNodeMaxLevel = maxLevel - nodeLevels
                //
                th.depthFirstSearch(this.dashboardMenu, (childNode) => {
                    if (childNode === node) {
                        return 'skip children'
                    }
                    if (!childNode._vm) {
                        console.log(childNode);
                    }
                    this.$set(childNode, 'droppable', childNode._vm.level <= childNodeMaxLevel)
                })
            },
}

Could you help me please?

phphe commented 5 years ago

try clone dashboardMenu, passed cloned object to tree