使用vue递龟遇到 Cannot use v-for on stateful component root element because it renders multiple elements

什么时候遇到的问题？

答：在我做 left-menu的递龟的时候，使用了 根组件作为循环体，如下

　　　　<template v-for="(item) in list">
            <el-submenu v-if="!!item.children" :index="item.id" >
                <template slot="title">
                    <i :class="item.iconclass"></i>
                    <span slot="title">{{ item.name }}</span>
                </template>
                <tree-menu :list="item.children"></tree-menu>
            </el-submenu>
            <el-menu-item :index="item.id" v-else>
                <i :class="item.iconclass"></i>
                <span slot="title" >{{ item.name }}</span>
            </el-menu-item>
        </template>

 

 

 

解决方案1：

 在根节点外层套上 一层div

　　<div>
        <template v-for="(item) in list">
            <el-submenu v-if="!!item.children" :index="item.meta.id" >
                <template slot="title">
                    <i :class="item.meta.iconclass"></i>
                    <span slot="title">{{ item.meta.name }}</span>
                </template>
                <tree-menu :list="item.children"></tree-menu>
            </el-submenu>
            <el-menu-item :index="item.meta.id" v-else>
                <i :class="item.meta.iconclass"></i>
                <span slot="title" >{{ item.meta.name }}</span>
            </el-menu-item>
        </template>
    </div>

 

 

问题：这里我使用 <template> 的本意就是为了不多产生一个div元素，多了一个div反倒又套了一个，但是 template 又不能套 template，会报错

由于这是一个 递龟的函数，会不断向下延申 tree-menu，会导致中间多了很多个div，导致样式和格式都会有点问题，那么方案2来了

 

解决方案2：

使用 fragment 虚拟节点，在生成页面时不会产生任何元素

<fragment>
        <template v-for="(item) in list">
            <el-submenu v-if="!!item.children" :index="item.meta.id" >
                <template slot="title">
                    <i :class="item.meta.iconclass"></i>
                    <span slot="title">{{ item.meta.name }}</span>
                </template>
                <tree-menu :list="item.children"></tree-menu>
            </el-submenu>
            <el-menu-item :index="item.meta.id" v-else>
                <i :class="item.meta.iconclass"></i>
                <span slot="title" >{{ item.meta.name }}</span>
            </el-menu-item>
        </template>
    </fragment>

 

<script>
    import { Fragment } from 'vue-fragment'
    export default {
        name: "treeMenu",
        props:{
            list:{required:true,type:Array}
        },
        components:{
            Fragment
        }
    }
</script>