<template>
    <div>
        <ul id="demo">
            <tree-item
                class="item"
                :item="treeData"
                @make-folder="makeFolder"
                @add-item="addItem"
            ></tree-item>
        </ul>
    </div>
</template>

<script>
import treeItem from "./treeItem";

export default {
    name: "viewTree", //
    components: { treeItem },
    data() {
        return {
            treeData: {
                name: "My Tree",
                children: [
                    {
                        name: "child folder",
                        children: [
                            {
                                name: "child folder",
                                children: [
                                    {
                                        name: "hello",
                                    },
                                    {
                                        name: "wat",
                                    },
                                ],
                            },
                            {
                                name: "hello",
                            },
                            {
                                name: "wat",
                            },
                            {
                                name: "child folder",
                                children: [
                                    {
                                        name: "hello",
                                    },
                                    {
                                        name: "wat",
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
        };
    },

    computed: {},

    methods: {
        makeFolder: function (item) {
            this.$set(item, "children", []);
            this.addItem(item);
        },
        addItem: function (item) {
            item.children.push({
                name: "new stuff",
            });
        },
    },

    // mounted() {},
};
</script>

<style lang='less' scoped>
</style>