반응형
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>
반응형
'Front > ::: Vue:::' 카테고리의 다른 글
| vue accessing the dynamic ref 다이나믹 ref 생성 (0) | 2023.08.28 |
|---|---|
| vue axios 60초 마다 갱신 (0) | 2023.08.21 |
| webpack 오류 vue-loader was used without the corresponding plugin (0) | 2023.08.13 |
| lodash _.remove 가 잘 안됨 (0) | 2023.08.10 |
| 가져온 object에서 특정 key 제외 출력 (0) | 2023.07.12 |
| vue SSO 작업 중 error 해결 정리 (0) | 2023.02.07 |
| 회사에서 npm install 안될때 (0) | 2023.01.26 |
| nuxt 에서 prettier -fix error (0) | 2019.08.06 |
