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

当前文章收录状态：

未收录

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


const activeIndex = ref("-1");
const activeIndex = ref("-1");
const activeIndex = ref("-1");

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


activeIndex.value = "0";
activeIndex.value = "0";
activeIndex.value = "0";

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


<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>
<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>
<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>

1 本站网络名称： 明恒博客

2 本站永久网址： www.zym88.cn

3 本站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END