Salutare,
Am un array de obiecte si vreau sa il parcurg afisand datele din el in mod ierarhizat. Am facut acest lucru intr-un mod mai rudimentar, insa vreau sa il fac dinamic.
Modalitatea pe care am ales-o, ma obliga ca de fiecare data sa intervin asupra codului cand apare un nivel nou.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<td>#</td>
<td>Name</td>
<td>Level</td>
</tr>
</thead>
<tbody>
<!-- level 1 -->
<template v-for="(level1, indexLevel1) in categories.filter(el => el.level === 1)">
<tr style="background: #c4c4e4">
<td>{{ indexLevel1 + 1 }}</td>
<td>{{ level1.name }}</td>
<td>{{ level1.level }}</td>
</tr>
<!-- level 2 -->
<template v-for="(level2, indexLevel2) in categories.filter(el => el.parentId === level1.id && el.level > 1 )">
<tr style="background: yellow">
<td>{{ indexLevel2 + 1 }}</td>
<td>{{ level2.name }}</td>
<td>{{ level2.level }}</td>
</tr>
<!-- level 3 -->
<template v-for="(level3, indexLevel3) in categories.filter(el => el.parentId === level2.id)">
<tr style="background: #00ff43">
<td>{{ indexLevel3 + 1 }}</td>
<td>{{ level3.name }}</td>
<td>{{ level3.level }}</td>
</tr>
<!-- level 4 -->
<template v-for="(level4, indexLevel4) in categories.filter(el => el.parentId === level3.id)">
<tr style="background: #faa05a">
<td>{{ indexLevel4 + 1 }}</td>
<td>{{ level4.name }}</td>
<td>{{ level4.level }}</td>
</tr>
</template>
</template>
</template>
</template>
</tbody>
</table>
</div>
</body>
<script>
let app = new Vue ({
el: '#app',
data: {
categories: [
{id: 1, name: 'Name 1', parentId: 1, level: 1},
{id: 2, name: 'Name 2', parentId: 2, level: 1},
{id: 3, name: 'Name 3', parentId: 3, level: 1},
{id: 4, name: 'Name 4', parentId: 1, level: 2},
{id: 5, name: 'Name 5', parentId: 4, level: 3},
{id: 6, name: 'Name 6', parentId: 5, level: 4},
{id: 7, name: 'Name 7', parentId: 2, level: 2}
]
}
});
</script>
</html>