Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demonstrating recursive Vue components
<template>
<div id="app">
<nested-list
v-for="item in list"
:key="item.name"
:name="item.name"
:items="item.items"
:level="0"
/>
</div>
</template>
<script>
import NestedList from './NestedList'
export default {
name: 'MasterList',
components: { NestedList },
data() {
return {
list: [
{
name: 'master on level 0',
items: [
{
name: 'item on level 1',
items: [
{
name: 'item on level 2',
items: [{ name: 'item on level 3' }],
},
{ name: 'item on level 2' },
{ name: 'item on level 2' },
],
},
{ name: 'item on level 1' },
],
},
],
}
},
}
</script>
<style>
body {
background: #20262e;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.item {
position: relative;
}
</style>
<template>
<div>
<div class="item" :style="indentation">{{ name }}</div>
<nested-list
v-for="item in items"
:key="item.name"
:name="item.name"
:items="item.items"
:level="level + 1"
/>
</div>
</template>
<script>
export default {
name: 'NestedList',
props: {
name: String,
level: Number,
items: Array,
},
computed: {
indentation() {
return { transform: `translateX(${this.level * 30}px)` }
},
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.