渲染選擇遞歸VUE JS

，我有以下array在Vue.js：渲染選擇遞歸VUE 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> 
    <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>

謝謝！

來源

2016-09-28 southpaw93

你的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工作更多地考慮操作數據，以滿足的需求組件，而不是在組件/視圖中考慮一些瘋狂的邏輯。

來源

2016-09-28 10:15:34 flipjms

是的，它的工作原理，但我做了那個服務器端，併發送數組回到vue已經變平，THX的想法。 – southpaw93

我有同樣的問題，但我不希望數據變平，因爲我希望縮進每個級別的特定數量的選項文本的顯示，以便層次結構在視覺上顯而易見。

我認爲這可以通過遞歸組件來實現，但我不太確定 - 我試着玩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>

但需要嵌套級別的變量的工作量。任何指針？

來源

2016-09-28 12:34:27

渲染選擇遞歸VUE JS

回答

相關問題