0

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

当然，我可以继续这样下去，然后我会到达我的 obj 的末尾。但在实际情况下，我不知道它会走多远，这就是为什么我想要一个不关心这一点的解决方案，并且一直持续到没有孩子为止。

我在文档中看到了一些东西，但是该代码与我的代码如此不同，以至于我无法真正理解如何应用（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>

欢迎所有想法的建议:)

最好的，巴斯蒂安

4

1 回答 1

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用整体渲染 a ，result但是我们必须先将它转换成一个数组（就像在计算属性中一样），所以我在这里选择了更简单的解决方案。

于 2016-11-15T20:27:37.983 回答