前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >nuxt3项目中使用element-plus的el-menu组件default-active无法正常激活菜单

nuxt3项目中使用element-plus的el-menu组件default-active无法正常激活菜单

作者头像
你的明明呐丶
发布2023-01-10 14:35:04
2K0
发布2023-01-10 14:35:04
举报

根据官方的指引使用default-active绑定一个激活菜单的index

代码语言:javascript
复制
const activeIndex = ref("-1");

bug现象:变更这个值发现菜单无法激活

代码语言:javascript
复制
activeIndex.value = "0";

解决:nuxt是服务端渲染框架,使用client-only标签使该组件仅在客户端渲染,然后问题就解决了

代码语言:javascript
复制
<client-only>
    <el-menu :default-active="activeIndex" mode="horizontal" active-text-color="#409EFF">
            <template v-for="(item,index) in menuList">
              <el-menu-item v-if="!item.list" :index="index + ''" @click="goLink(item.menuUrl)">{{ item.menuName }}</el-menu-item>
              <el-sub-menu v-else :index="index + ''">
                <template #title>{{ item.name }}</template>
                <el-menu-item :index="index + '-' + i" @click="goLink(j.menuUrl)" v-for="(j,i) in item.list" :key="i">{{ j.menuName }}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
</client-only>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
Serverless SSR
基于 Web Function 部署 SSR 框架,支持接收与处理原生 HTTP 请求,无需再做事件格式转换,原生 Web 框架仅需几行代码,即可平滑迁移上云。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档