Vue JS - Rendering Multidemensional Obj

Question

私はVUEが新しく、オブジェクトをどのようにレンダリングするのか分かりません。

私は、このオブジェクトは、私が最初のレベルを無視して、私の店でそれをプッシュするウェブ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> 
 
    <li>Category B</li> 
 
    </ul> 
 
</ul>

そしてoffcourse私ができるの：私はその後さらに得ることはありませんしかし （これは、所望の出力の一例だろう）

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

このようにして、私は私のobjの終わりに到達します。実際の状況では、私はそれがどれほど深いかわからないので、それは私がそれを気にしない解決策を望んでおり、子供がいなくなるまで継続しています。

私のinitコードは基本的に、これは一緒にすべてのもの（簡体字）です（https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components）

を私は、docの中に少し何かを見ましたが、そのコードは私が実際にどのように適用するかを理解するカントことを鉱山からそう異なります

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サービスの結果フォーマットを変更したりする方がよいでしょう。項目のリストをレンダリングするための責任があるtree-root、および再帰的に最終的には、単一の項目をレンダリングする別のレンダリングを行うtree-item：

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

計算されたchildrenプロパティは、子オブジェクトを子のリストに変換するために使用されます。

最後に、ルートコンポーネントをレンダリングするために、ルート要素であるresult['1']をtree-itemとしてレンダリングします。resultの代わりにtree-rootをレンダリングすることもできますが、最初は計算されたプロパティのように配列に変換しなければならないので、ここでは単純なソリューションを選択しました。