VueJS: рекурсивная генерация из списка вложенных объектов с использованием v-for

Question

Я хочу, чтобы Vue рекурсивно генерировал структуру данных с v-for, где мои данные имеют следующий формат:

Данные

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

Код в NodeTree.vue (ниже)имеет некоторые логические проблемы в результате, нет вывода. Может ли кто-нибудь помочь мне получить логический код в NodeTree.vue вправо

Вот ссылка на рабочую коды и демонстрационную коробку

Вот моя иерархия компонентов:

<code><pre>

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

Вот мой источник Vue SFC:

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>

Приложение. 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>

Любая помощь приветствуется.

Спасибо

Answer 1

Убедитесь, что ваши данные структурированы, чтобы вы могли создать рекурсивную структуру

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