On gists

Recursion

Vue.js

index.vue Raw #

<template>
  <div>
    <tree-list
      :children="treeItems"
      :parents="[]"
    />
  </div>
</template>

<script>
  import TreeList from './TreeList.vue'

  export default {
    components: {TreeList},
    compontents: {
      TreeList
    },
    data () {
      return {
        treeItems: [
          {
            title: 'First top level',
            children: [
              {
                title: 'First sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              },
              {
                title: 'Second sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              },
              {
                title: 'Third sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              }
            ]
          },
          {
            title: 'Second top level',
            children: [
              {
                title: 'First sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              },
              {
                title: 'Second sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              },
              {
                title: 'Third sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              }
            ]
          },
          {
            title: 'Third top level',
            children: [
              {
                title: 'First sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              },
              {
                title: 'Second sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              },
              {
                title: 'Third sub level',
                children: [
                  {title: 'First sub-sub level'},
                  {title: 'Second sub-sub level'},
                  {title: 'Third sub-sub level'}
                ]
              }
            ]
          }
        ]
      }
    }
  }
</script>

<style scoped>

</style>

TreeLilst.vue Raw #

<template>
  <ul>
    <li v-for="(item, index) in children" :key="index">
      <div>
        <strong>{{ item.title }}</strong>
        ({{ parents.join(' / ') }})
      </div>
      <tree-list
        v-if="item.children"
        :children="item.children"
        :parents="[...parents, item.title]"
      />
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'TreeList',
    props: {
      children: {
        type: Array,
        default: () => []
      },
      parents: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

<style scoped>

</style>