Vue.js 中 v-for 循环的动态嵌套

Question

不确定这是否可行，但值得一试。

我正在尝试构建一个系统，其中一组组件可以动态呈现，在同一个组件中，在一组动态嵌套的 v-for 循环中。

举个例子。

假设我在这个结构中有一系列<div/>s 和一个json

list : [
    ['Test','Test],
    ['Test2', 'Test2],
    ['Test3','Test3],
]

这将呈现：

<div>
   <div> 
     <div>
       Test
     </div>
     <div>
       Test
     </div>
   </div>
   <div> 
     <div>
       Test2
     </div>
     <div>
       Test2
     </div>
   </div>
   <div> 
     <div>
       Test3
     </div>
     <div>
       Test3
     </div>
   </div>
</div>

但是，如果我添加了另一组嵌套， 例如

list : [
    ['Test','Test],
    ['Test2', 'Test2],
    ['Test3',['Test4', 'Test4']],
]

它会像这样呈现，

<div>
   <div> 
     <div>
       Test
     </div>
     <div>
       Test
     </div>
   </div>
   <div> 
     <div>
       Test2
     </div>
     <div>
       Test2
     </div>
   </div>
   <div> 
     <div>
       Test3
     </div>
     <div>
       <div>
         Test4
       </div>
       <div>
         Test4
       </div>
     </div>
   </div>

</div>

我知道这可以通过固定级别的嵌套来完成 例如

<div>
  <div v-for="(item,index) in list" :key="index">
    <div v-for="(subItem, subIndex) in item :key="subIndex">
      {{subItem}}
    </div>
  </div>
</div>

但是，如果必须在运行时对其进行解释，我不确定如何使其对动态嵌套级别做出反应。 如果有人对此有任何想法，我将不胜感激。

编辑：澄清一下，我要寻找的解决方案适用于未知的嵌套。

Answer 1

创建两个组件 <list> 和 <list-item> 并在 <list-item> 中递归调用 <list> 如果 item props 是一个数组，否则呈现一个普通的 <div> 标签。

像这样：

Vue.component('list', {
    props:["items"],
    functional: true,
    render: function(createElement,{ props, children }){ 
        return props.items.map((item)=>createElement('list-item',{ props: {item} }))
    }
});

Vue.component('list-item', {
    props:["item"],
    template: '<div v-if="isArray(item)"><list v-bind:items="item"> </list> </div>'+
              '<div v-else> {{item}} </div>',
    methods:{
        isArray:function(item){
            return Array.isArray(item);
        }
    }
});

var vm = new Vue({
    el: '#app',
    data:{
    items:[
        ['Test','Test'],
        ['Test2', 'Test2'],
        ['Test3',['Test4', 'Test4']],
    ],
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
   <list v-bind:items="items"></list>
   </div>
</div>

Answer 2

为了实现这一点..您可以尝试使用组件和回调与自己的组件进行嵌套循环。 只是一个想法，我不确定它是否有效。