如何在Vue中实现嵌套无限v-for循环？

要遍历任意层级的子节点，不用新增额外HTML元素，直接用递归组件就能解决，复用现有列表结构自动处理所有层级：

修改后代码 #

模板 #

<ul class="tree">
  <li>
    <span>First Node</span>
    <tree-node :nodes="trees"></tree-node>
  </li>
</ul>

<!-- 递归组件模板，完全复用ul/li结构 -->
<template id="treeNodeTpl">
  <ul>
    <li v-for="(node, idx) in nodes" :key="idx">
      <span v-text="node.name"></span>
      <!-- 存在子节点时递归调用自身 -->
      <tree-node v-if="node.childrens" :nodes="node.childrens"></tree-node>
    </li>
  </ul>
</template>

JavaScript #

export default {
  data() {
    return {
      trees: [
        { name: 'Node A' },
        { name: 'Node B', childrens: [
            { name: 'Node B1' },
            { name: 'Node B2', childrens: [
                { name: 'Node B2.1' },
                { name: 'Node B2.2' },
            ] },
        ] },
      ],
    };
  },
  components: {
    TreeNode: {
      template: '#treeNodeTpl',
      props: ['nodes']
    }
  }
};

实现逻辑 #

递归组件会自动检测节点的childrens属性，只要存在子节点就重复渲染自身结构，不管嵌套多少层都能处理，而且全程只用了原来的<ul>和<li>标签，没有添加任何额外HTML元素。

如果用单文件组件开发，也可以把递归组件拆成单独的.vue文件，调用逻辑完全一致。

内容的提问来源于stack exchange，提问作者Ashta V