v-if和v-for不能同时使用

v-if和v-for不能同时使用

在项目中遇到element-ui导航菜单中v-if和v-for同时使用报错的问题

因为要判断遍历的数据中是否包含第三级菜单，所以在外面包一层template，然后把v-for写到这里面

            <!-- 二级菜单 -->
              <template  v-for="(subitem, subi) in item.children">
              
                 <!-- 有三级菜单 -->
                 <el-submenu
                 v-if="subitem.grandson"
                :index=""
                :key="subi"
               >
                  <template slot="title"> </template>
                    <!-- 三级菜单 -->
                  <el-menu-item  >
                  <template slot="title"></template>
                  </el-menu-item>
                 </el-submenu>
                 
                 <!-- 没有三级菜单 -->
                 <el-menu-item 
                 v-else
                :index=""
                :key="subi" >
                  <template slot="title"> </template>
                 </el-menu-item>
              </template>

不过，对于这种动态新增的菜单来说，如果不需要使用路由导航的话，建议使用element-ui中的树结构会更加简单快捷