代码格式如下，vue中v-if，与v-for无法一块使用，那么如果导航栏多级嵌套，应该如何循环呀？

Question

          <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <span>{{ item.name }}</span>
            </template>
             <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"> 
                <i class="el-icon-menu"></i>{{ subItem.menuName }} 
              </el-menu-item>           
          </el-submenu>

[
        {
          name:"一级",
          id:101,
          children:[
            { 
                name:"二级",
                id:101,
                path:"1"
                children:[
                    {
                        name:"三级",
                        id:101,
                        path:"problem"
                    }
                ]
            },{ 
                name:"二级",
                id:101,
                path:"problem"

            }
          ]
        },{
            ...
        }
         
]

Answer 1

你可以在v-for中对menuList或item.children使用filter进行过滤，也可以像官网一样，把v-for的组件用template包裹起来，v-for写在template上 https://staging-cn.vuejs.org/...

Answer 2

建议看一下 Vue 的递归组件相关的内容。比如这篇：https://www.jianshu.com/p/84e...

另外不需要把 v-for 和 v-if 放在同一个组件上，但是可以这么用，只是在处理上好像 Vue2 和 Vue3 有些不同。你可以在 for 里面嵌一个 <template v-if ...>

给个示例：在 Vue3 SFC Playground 上

Answer 3

谁说的不能一块用