VueJS: recursively generate from a list of nested objects using v-for

Question

I want Vue to recursively generate data structure with v-for where the my data is in the following format:

Data

var myObj = {
    parent:  {
        child1:  {
            last_child1: {
                test: null
            }
        }
    }
}

The code in NodeTree.vue (below) has some logical issues as a result, there is no output. Can someone help me get the logic code in NodeTree.vue right

Here is the link to a working codesandbox demo

Here is my Component hierarchy:

<pre>

App.vue
  |
  |_Tree.vue
       |
       |_NodeTree.vue

</pre>

Here is my Vue SFC source:

Tree.vue

<template>
  <div class="tree">
    <ul class="tree-list">
        <NodeTree :treeData="data" />
    </ul>
  </div>
</template>

<script>
import NodeTree from "./NodeTree";

export default {
  props: ["data"],
  components: {
    NodeTree
  }
};
</script>

<style>
.tree-list ul {
  padding-left: 16px;
  margin: 6px 0;
}
</style>

NodeTree.vue

<template>
  <li>
     <span class="label">{{ el }}</span>
      <ul>
          <li :key="idx" v-for="(item,idx) in treeData">
          <mynode :key="pos"
             v-for="(el, pos) in item" 
             :treeData="el" />
        </li>
      </ul>
  </li>
</template>

<script>
export default {
  name: "mynode",
  props: {
    treeData: Array
  }
};
</script>

<style>
.label {
  display: block;
  border: 1px solid blue;
}
.bor {
  border: 1px solid red;
}
</style>

App.vue

<template>
  <div id="app">
    <tree :data="folder_Names" >
    </tree>
  </div>
</template>

<script>
import Tree from "./components/Tree";

export default {
  name: "App",
  data() {
    return {
      folder_Names: {
            parent:  {
                child1:  {
                 last_child1: {
                    test: null
                    }
                }
            }
        }
    }
  },
  components: {
    Tree
  }
};
</script>

Any help is appreciated.

Thanks

dreijntjens · Accepted Answer · 2019-10-09 19:25:29Z

Make sure your data is structured so you could create a recursive structure

App.vue:

<template>
  <div id="app">
    <tree :data="folder_Names" >
    </tree>
  </div>
</template>

<script>
import Tree from "./components/Tree";

export default {
  name: "App",
  data() {
    return {
      folder_Names: [
       { name: 'Parent1', children: [
         { name: 'Child1_1', children: [
           {name: 'Grandchild1_1_1'},
           {name: 'Grandchild1_1_2'} 
         ]},
        { name: 'Child1_2' } 
       ]},
       { name: 'Parent2', children: [
         { name: 'Child2_1', children: [
           {name: 'Grandchild2_1_1'},
           {name: 'Grandchild2_1_2'} 
         ]},
        { name: 'Child2_2' },
        { name: 'Child2_3' },
       ]}
    ]}
  },
  components: {
    Tree
  }
};
</script>

Tree.vue

<template>
  <div class="tree">
    <ul class="tree-list">
        <node-tree :treeData="data" />
    </ul>
  </div>
</template>

<script>
import NodeTree from "./NodeTree";

export default {
  props: ["data"],
  components: {
    NodeTree
  }
};
</script>

Tree-node

<template>
      <ul>
          <li :key="idx" v-for="(item,idx) in treeData">          
            {{ item.name }} 
            <my-node :treeData="item.children" />
          </li>
      </ul>  </template>

<script> 
   export default {   
      name: "MyNode",   
      props: ["treeData"],   
 </script>

https://codesandbox.io/s/vue-demo-recursive-fb-filemanager-folderlist-test-k9jo5

Collectives™ on Stack Overflow

VueJS: recursively generate from a list of nested objects using v-for

Data

Tree.vue

NodeTree.vue

App.vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Data

Tree.vue

NodeTree.vue

App.vue

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related