に再帰的に選択をレンダリングVUE JS

Question

I持ってarrayVue.jsに次の

epics: { 
     1: {'text' : 'Epic 1', 'value' : 1, 'children' : { 
       1: {'text' : 'Subepic 1', 'value' : 4}, 
       2: {'text' : 'Subepic 2', 'value' : 5}, 
       3: {'text' : 'Subepic 3', 'value' : 6}, 
      } 
     }, 
     2: {'text' : 'Epic 2', 'value' : 2}, 
     3: {'text' : 'Epic 3', 'value' : 3} 
    }, 

nレベルの深arrayとすることができます。

子オプションを親オプションの下に（再帰的に）使用してselectを生成したいとします。私はどこでも検索しましたが、どのようにこれを行うことができるかの例を見つけることはできません。 どうすればいいですか？

例を選択し、生成募集：

<select> 
    <option>Epic 1</option> 
    <option>Subepic 1</option> 
    <option>Subepic 2</option> 
    <option>Subepic 3</option> 
    <option>Epic 2</option> 
    <option>Epic 3</option> 
<select> 

ありがとうございました！

Answer 1

epics「配列」は実際には配列ではなく、オブジェクトです。まず、実際の配列に変更します：

epics: [ 
    { 
     text: 'Epic 1', 
     value: 1, 
     children:[ 
      {text : 'Subepic 1', value : 4}, 
      {text : 'Subepic 2', value : 5}, 
      {text : 'Subepic 3', value : 6}, 
     ] 
    }, 
    { 
     text : 'Epic 2', 
     value : 2 
    }, 
    { 
     text : 'Epic 3', 
     value : 3 
    } 
], 

中かっこの代わりに大括弧が使用されています。

次に、あなたがあなたのフラット化バージョン叙事詩の配列を返します計算されたプロパティを定義することができます計算されたプロパティは、あなたの配列を処理し、すべてに新しいものを構築するフラットなメソッドを呼び出します

computed: { 
    flatted: function() { 
     return this.flat(this.epics); 
    } 
}, 

methods: { 
    flat(items) { 
     var final = [] 
     var self = this 
     items.forEach(function(item) { 
      final.push(item) 

      if (typeof item.children !== 'undefined') { 
       final = final.concat(self.flat(item.children)); 
      } 
     }) 

     return final; 
    } 
} 

をトップレベルの子供たち。

叙事詩の配列を変更するたびに、計算されたものが自動的に更新され、それを平坦化することができます。あなたは、この計算されたプロパティにv-forを行うことができますし、あなたがそれをしたいと、それは選択をレンダリングするコンポーネントで

：

<select> 
    <options v-for="item in flatted">{{item.text}}</option> 
</select> 

をVuejsで作業する場合は、より程度のニーズに合わせて、あなたのデータを操作すると思いますあなたのコンポーネント/ビュー内のいくつかの狂ったロジックについて考えるのではなく、

Answer 2

私は同じ問題を抱えていますが、オプションテキストの表示を各レベルごとにインデントして、階層が視覚的に見えるようにしたいのでデータを平坦化したくありません。

これは再帰的なコンポーネントを介して達成できると思いますが、どういうふうに、私はthis fiddleで遊んでみましたが、うまく動作しませんでした。

基本的に、私は、ネストされたデータから、次のような構造を実現するために探しています：

<select> 
    <option class="level-0">Epic 1</option> 
    <option class="level-1">Subepic 1</option> 
    <option class="level-1">Subepic 2</option> 
    <option class="level-1">Subepic 3</option> 
    <option class="level-0">Epic 2</option> 
    <option class="level-0">Epic 3</option> 
</select> 

しかし、それは、ネストされたレベルの可変量のために働く必要があります。すべてのポインタ？