Vue JS -渲染多维度Obj

Question

我对VUE还不熟悉，很难搞清楚如何渲染一个对象，我不知道它的深度会有多深。

我从web-api返回这个对象。

​

var result = {  
               "1":{  
                  "id":"1",
                  "parent_id":"-1",
                  "name":"Master",
                  "level":1,
                  "children":{  
                     "2":{  
                        "id":"2",
                        "parent_id":"1",
                        "name":"Category A",
                        "level":2,
                        "children":{  
                           "5":{  
                              "id":"5",
                              "parent_id":"2",
                              "name":"Category D",
                              "level":3
                           },
                           "6":{  
                              "id":"6",
                              "parent_id":"2",
                              "name":"Category E",
                              "level":3,
                              "children":{  
                                 "10":{  
                                    "id":"10",
                                    "parent_id":"6",
                                    "name":"Category F",
                                    "level":4
                                 }
                              }
                           }
                        }
                     },
                     "3":{  
                        "id":"3",
                        "parent_id":"1",
                        "name":"Category B",
                        "level":2,
                        "children":{  
                           "4":{  
                              "id":"4",
                              "parent_id":"3",
                              "name":"Category C",
                              "level":3
                           }
                        }
                     }
                  }
               }
            };

​

我忽略了第一层，把它推到了我的店里。现在，我正在寻找一种递归的方法来检查所有的父级和子类。(这将是所需输出的一个示例)

​

<ul>
  <li>Master</li>
    <ul>
      <li>Category A</li>
      <ul>
        <li>Category D</li>
        <li>Category E</li>
        <ul>
          <li>Category F</li>
        </ul>
      </ul>
      <li>Category B</li>
      <ul>
        <li>Category C</li>
      </ul>
   </ul>
</ul>

​

然而，我没有进一步了解到：

​

<ul>
  <li>Master</li>
  <ul>
    <li>Category A</li>
    <li>Category B</li>
   </ul>
</ul>  

​

当然，我可以像这样继续下去，然后我就会到达我的讣告的尽头。但在实际情况下，我不知道它会有多深，这就是为什么我想要一个不关心这个问题的解决方案，直到没有更多的孩子。

我在文档中看到了一些东西，但这些代码与我的代码非常不同，我无法真正理解如何应用( https://v2.vuejs.org/v2/guide/components.html#Circular-References-Between-Components )

我的init代码基本上是所有(简化的)东西在一起的：

​

store = function()  {
    var self = this;
    self.hierarchies  = [];
    self.subView = 'hierarchies';
    self.tree = [];
};

Vue.component('hierarchies', {
    template: '#hierarchies',
    props: ['store']
});

Vue.component('products', {
    template: '#products',
    props: ['store']
});

Vue.component('treeview', {
    template: '#treeview',
    props: ['store']
});

app = new Vue({
    el: '#content',
    data: function () {
        return {
            store: {},
            tree: {}
        }
    },
    created: function () {
        this.store = new store();
    }
});


// DO AXJAX REQUEST GET HIERARCHY'S
var response = // AJAX  {};
app.store.tree.push(response[1]);

<template id="treeview">
    <div>
        <ul v-if="store.tree.length">
            <li v-for="m in store.tree">
                {{ m.name }}
                <ul v-if="m.children">
                    <li v-for="c in m.children">
                        {{ c.name }}
                    </li>
                </ul>
                <data :tree="m"></data>
            </li>
        </ul>
    </div>
</template>

​

欢迎各界人士提出建议:)

最好的，巴斯蒂安

Answer 1

您的数据是一种非常不切实际的格式，因为您不能使用v-for指令循环对象键。因此，为了使用这种格式，您必须首先将其转换为数组。我正在为此使用计算属性，但从长远来看，更好的解决方案可能是在开始时转换数据一次，甚至更改web服务的结果格式(如果可能的话)。

​

var result = {"1":{"id":"1","parent_id":"-1","name":"Master","level":1,"children":{"2":{"id":"2","parent_id":"1","name":"Category A","level":2,"children":{"5":{"id":"5","parent_id":"2","name":"Category D","level":3},"6":{"id":"6","parent_id":"2","name":"Category E","level":3,"children":{"10":{"id":"10","parent_id":"6","name":"Category F","level":4}}}}},"3":{"id":"3","parent_id":"1","name":"Category B","level":2,"children":{"4":{"id":"4","parent_id":"3","name":"Category C","level":3}}}}}};

Vue.component('tree-root', {
  props: ['items'],
  template: `
    <ul>
      <tree-item v-for="item in items" v-bind:item="item"></tree-item>
    </ul>
  `
});

Vue.component('tree-item', {
  props: ['item'],
  computed: {
    children: function () {
      return Object.keys(this.item.children).map(k => this.item.children[k]);
    }
  },
  template: `
    <li>
      {{item.name}}
      <tree-root v-if="item.children" v-bind:items="children"></tree-root>
    </li>
  `
});

var app = new Vue({
  el: '#app',
  data: {
    rootItem: result['1']
  }
});

<ul id="app">
  <tree-item v-bind:item="rootItem"></tree-item>
</ul>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

​

我在这里要做的是使用两个组件：tree-root负责呈现项列表，tree-item负责呈现单个项，最终递归地为每个项的子项呈现另一个tree-root。

计算的children属性用于将子对象转换为子对象列表。

最后，为了呈现根组件，我们只将作为根元素的result['1']呈现为tree-item。我们也可以用整个tree-root来呈现一个result，但是我们必须首先将它转换成一个数组(就像计算属性中的那样)，所以我选择了更简单的解决方案。