element导航菜单v-for循环数据后折叠菜单栏时有下拉菜单的文字不隐藏

   

    
        
        
        {{item1.menuTitle}}
      
      
      
        {{item.menuTitle}}
      
  

原因：在el-menu嵌套了div,而el-menu标签本身希望里面嵌套的是el-menu-item,el-submenu,el-menu-item-group其中之一
但是又必须有一个div标签,因为菜单有不同情况（只有一级或者多级下拉），v-for又不能与v-if在同一标签共存
查找资料发现有个fragment分段标签，不了解的可以看下此文Vue中fragment.js使用方法详解

好消息是vue提供了vue-fragment库
步骤如下
安装

npm i vue-fragment --save

引入

// main.js
import Fragment from ‘vue-fragment’
Vue.use(Fragment.Plugin)

menu

   
    
        
        
        {{item1.menuTitle}}
      
      
      
        {{item.menuTitle}}
      
  

如果由于环境问题不好安装vue-fragment依赖
直接进入github搜vue-fragment,引入以下两个文件

然后在main.js里引入

import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)

// or

import { Plugin } from 'vue-fragment'
Vue.use(Plugin)

// …

export const MyComponent {
  template: '
  
    
    {{ message }}
  
  ',
  data() { return { message: 'hello world }}
}