vue tree menu test code

3depth 구현

<template>
    <div>
        <ul>
            <li v-for="item in treeData" :key="item.name">
                {{ item.name }}
                <ul v-if="item.type === 'directory' && item.children">
                    <li v-for="childItem in item.children" :key="childItem.name">
                        {{ childItem.name }}

                        <ul v-if="childItem.type ==='directory' && childItem.children">
                            <li v-for="childItem in childItem.children" :key="childItem.name">
                            {{ childItem.name }}
                            </li>
                        </ul>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name: 'testView',
    data() { //함수 형태
        return {
            treeData: [{
                "name": "root",
                "type": "directory",
                "children": [
                    {
                        "name": "folder1",
                        "type": "directory",
                        "children": [
                            {
                                "name": "file1.txt",
                                "type": "file"
                            },
                            {
                                "name": "file2.txt",
                                "type": "file"
                            }
                        ]
                    },
                    {
                        "name": "folder2",
                        "type": "directory",
                        "children": [
                            {
                                "name": "subfolder1",
                                "type": "directory",
                                "children": [
                                    {
                                        "name": "file3.txt",
                                        "type": "file"
                                    }
                                ]
                            },
                            {
                                "name": "file4.txt",
                                "type": "file"
                            }
                        ]
                    },
                    {
                        "name": "file5.txt",
                        "type": "file"
                    }
                ]
            }],
        }
    },
    methods: {
        toggleNode(item) {
            if (item.type === 'directory' && item.children) {
                item.expanded = !item.expanded;
            }
        }
    }

}

</script>
<style>
ul {
    list-style: none;
    padding: 0;
}

li {
    cursor: pointer;
}

.nested {
    display: none;
}

.active {
    display: block;
}
</style>