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

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

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

举个例子

假设我在这个结构中有一系列的

和一个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>

结果会是这样的,

<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>

试验
试验
测试2
测试2
测试3
测试4
测试4

我知道如何通过固定的筑巢水平来完成这项工作 e、 g

为了实现这一点，您可以尝试使用组件和使用自己的组件进行嵌套循环的回调。
这只是一个想法，我不确定它是否有效。
创建两个组件
和
，如果道具是数组，则在
中递归调用
，否则呈现一个普通的
标记

像这样：


Vue.component（'list'{
道具：[“道具”]，
功能性：对，
render:function（createElement，{props，children}）{
返回props.items.map（（item）=>createElement（'list-item'，{props:{item}}））
}
});
Vue.组件（“列表项”{
道具：[“物品”]，
模板：“”+
“{{item}}”，
方法：{
isArray:功能（项目）{
返回数组.isArray（项）；
}
}
});
var vm=新的Vue({
el:“#应用程序”，
数据：{
项目：[
[‘测试’，‘测试’]，
['Test2'，'Test2']，
['Test3'，['Test4'，'Test4']]，
],
}
});

执行另一轮循环，并使用v-if确定是否渲染（即是否存在另一个嵌套）。如果进一步嵌套，我不确定这将如何工作，例如[，Test，[Test，[…etc]]]]@ArcIt应该可以正常工作。你应该使用递归函数。我理解你的意思，这是我的第一个想法（如果找不到其他方法，我可能会这么做），但理想情况下，我会在同一个组件中完成这一切，这样传递数据会更容易，并且可以避免复杂的vuex交互
<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>