Vue JS - 渲染多维对象

Question

我是 VUE 的新手，很难弄清楚如何渲染一个 Object，我不知道它会达到多少层。

我得到这个 object 从 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
                           }
                        }
                     }
                  }
               }
            };

我忽略了第一层并在我的商店中推送了它。现在我正在寻找一种递归方法来遍历所有 parent 和它们 children。（这将是所需输出的示例）

<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>

当然，我可以继续这样下去，然后我会到达我的目标的尽头。但在实际情况下，我不知道它会走多远，这就是为什么我想要一个不关心这个的解决方案，并且继续使用直到没有更多 children.

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

我的初始化代码基本上就是所有的东西（简化）：

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 指令遍历 object 键。因此，为了使用该格式，您必须先将其转换为数组。我为此使用了计算属性，但是对于长运行更好的解决方案可能是在开始时转换一次数据，甚至更改 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。

计算出的children属性用于将childrenobject转换为children.

的列表

最后，为了渲染根组件，我们只将根元素 result['1'] 渲染为 tree-item。我们也可以渲染一个 tree-root 而不是整个 result 但是我们必须先将它转换成一个数组（就像在计算的属性中一样），所以我只是选择了这里有更简单的解决方案。

Vue JS - 渲染多维对象

Vue JS - Rendering Multidemensional Obj

vue.js

vue-component

vuex