渲染选择递归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

回答

相关问题