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>

もちろん、私はこのように続けることができ、その後、オブジェクトの最後に到達します。しかし、実際の状況では、それがどれほど深刻になるかはわかりません。そのため、それを気にせず、子供がいなくなるまで継続するソリューションが必要です。

ドキュメントで少し見ましたが、そのコードは私のものとは非常に異なるため、適用方法を本当に理解できません( 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>

ここで行っているのは、2 つのコンポーネントを使用することです。1 つtree-rootはアイテムのリストのレンダリングをtree-item担当し、もう 1 つは単一のアイテムのレンダリングを担当し、最終的tree-rootに各アイテムの子に対して別のアイテムを再帰的にレンダリングします。

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

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

于 2016-11-15T20:27:37.983 に答える