vue使用iview导航栏Menu activeName不生效

最新推荐文章于 2022-09-16 16:26:01 发布
最新推荐文章于 2022-09-16 16:26:01 发布
阅读量1.8k 收藏 1
点赞数
文章标签： vue javascript vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Seven_Next/article/details/105684505
版权
本文介绍在Vue项目中使用iview Menu组件时遇到activeName无法设置默认选中状态的问题及解决方案。当试图通过数据驱动Menu视图时，activeName可能不起作用。在mounted生命周期钩子中重新加载可以解决此问题。
摘要由CSDN通过智能技术生成

记录一下使用iview-Menu遇到的一个问题
使用iview使用导航栏组件Menu 导航菜单
当我们需要默认选择内容为
在这里插入图片描述
我们知道 当我们需要在进入页面时或使用数据来驱动该视图时会遇到无法使用 失效的问题

<Menu ref="side_menu" :theme="theme3" :active-name="activeName">
        <MenuGroup title="内容管理">
最低0.47元/天 解锁文章
Seven_Next
关注
使用iviewUI做Vue管理系统/动态收缩左侧菜单遇到的问题
Fang格子的博客
01-09 3584
根据iviewUI官网https://www.iviewui.com/components/layout#ZDYCFQ，写侧边菜单遇到的问题 实现代码，使用了自定义触发器@click.native="collapsedSider"（自定义触发器，可以设置hide-trigger属性） <style scoped> .layout { border: 1px so...
如何解决 iframe 无法触发 clickOutside
tzllxya的博客
06-23 3267
如何解决 iframe 无法触发 clickOutside 前言 在公司的一次小组分享会上，组长给我们分享了一个他在项目中遇到的一个问题。在一个嵌入 iframe 的系统中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。 查看在线示例 为什么无法触发 clic...
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
10-16
主要介绍了解决vue-cli+iview项目打包上线之后图标不显示问题,本文通过两种方法给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
iview menu active-name 无效的问题
qq_20659519的博客
01-16 2028
vue menu active-name 无效的问题： 场景：Menu组件设置active-name属性无效。 原因：因为active-name 生效之后，menu是从接口请求回来的。这时候this.menus 被重新赋值，触发数据变更事件，menu组件又重新渲染。active-name应该只在初次加载时执行一次，这个目前只是猜测，后续会查找相关资料（有谁知道，麻烦告诉一下哈）。 解决方法...
iview 动态渲染menu时active-name无效的问题
weixin_30902251的博客
09-05 488
动态渲染menu时，如果需要active-name，那么name只能绑定index，动态渲染的数组初始必须有一个空对象。否则无法使用active-name属性。注：仅限3.0版本，不排除新版本修复的可能！ <Menu active-name="0" :theme="processManagementTheme" width="auto" @on-...
iview2.0中动态生成Menu时，设置activeName不生效的解决办法
chenghundong6989的博客
06-21 806
最初的核心代码，最终代码将在本文最后贴出。 <template> <Menu theme="light" :activeName="activeKey" @on-select="select"> ...
iview MenuItem动态渲染 active-name无效的问题
qq_41994549的博客
01-06 4111
&lt;Menu theme="light" width="auto" ref="user" :active-name="user" :class="menuitemClasses" :open-names="['1']"&gt; &lt;Submenu name="1"&gt;
IVIEW menu菜单栏使用open-names属性不生效
qq_39540631的博客
12-07 1325
现象说明：先看官方文档设置 active-name 可以选中指定的菜单，设置 open-names 可以展开指定的子菜单。 加了open-names时 二者都有 使用变量绑定：没有出现问题 <template> <Menu :open-names="openName" :active-name="activeName"> <Submenu name="1"> <template slot="title">
解决iview中active-name不刷新问题
qq_38690432的博客
01-02 1689
在做项目的时候，遇到一个问题，当刷新页面或者路由跳页的时候，导航的激活菜单和当前显示的组件不匹配。 主要分为两种情况 1、router跳页，这里主要是监听router的变化，调用updateOpened方法。 2、F5刷新页面，这里用到vue生命周期函数create。 话不多说，上代码， <template> <div> <Sider class="frame-...
vue-router进入页面时导航栏没有active效果
qq_25302061的博客
10-25 1748
{path:'/',component:'/x'}这样进入页面时会有加载组件的效果，但是导航栏没有active效果。可以改为[{path:'/',redirect:'/x'},{path:'/x',component:'/x'}]
iview中刷新页面的时候更新导航菜单的active-name
冰雪为融的博客
10-20 1万+
在做项目的时候，遇到一个问题，当刷新页面的时候，导航的激活菜单和当前显示的组件不匹配，查了一下官网（https://www.iviewui.com/components/menu），寥寥几句话就说完了，至于怎么实现没有详细说明 Menu methods: 方法名    说明    参数 updateOpened    手动更新展开的子目录，注意要在 $nextTick 里调用    无 up...
iview使用Menu动态生成时active-name没反应
hcq_qh的博客
07-08 692
updateOpened 手动更新展开的子目录 updateActiveName 手动更新当前选择项 先绑定ref（如side_menu）,然后在updata写入方法 一定要调用this.$nextTick this.$nextTick(() => { this.$refs.side_menu.updateOpened() this.$refs.side_menu.updateActiveName() }) ...
解决iview菜单使用iconfont图标无法显示的问题
热门推荐
lvdou1120101985的博客
09-28 2万+
写在前面： 首先，我出现问题的场景是使用在导航菜单上，即 Menu Item； 其次，我是使用json文件递归生成的菜单列表，在meta属性中设置的icon；   今天在使用iconfont的图标作为菜单的图标时发现总是显示成方框框 使用方法和设置Button的图标是一样的，检查了好久也没有发现问题，百思不得其解…… 使用F12检查元素，发现原来框架是在样式前面加上了 iv...
iview 打包Icon不显示问题修复
尼伯特的博客
01-03 4462
iview 打包不显示问题修复 最近使用iviewUI框架开发应用，打包完成之后访问，发现所有的icon都报错不显示， 最终通过修改webpack配置文件修复，修改如下： 找到 build 目录下 webpack.prod.conf.js 文件， rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, ...
解决iView Menu 页面刷新时，不选中当前MenuItem的问题
qq_41524691的博客
07-07 1680
在使用iview Menu时，点击某一个菜单项，刷新页面后，总是选中第一项菜单，但当前路由没有变化，由此可以根据当前路由不会变化来解决这个问题。 <Menu ref="menu" mode="horizontal" theme="light" :active-name="active" > <MenuItem v-for="item in menuList" :key="item.path" :name="item.path" :to="item
解决vue-cli+iview项目打包上线之后图标不显示问题
Linho的博客
10-15 1084
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath改成…/…/，保存并重新打包。注意：这个路径不是绝对的，根绝自己的目录结构来写 // Extract CSS when that option is spec...
Vue使用iview中menu菜单组件的大坑！
AWDSDF的博客
09-16 1215
Vue2使用iview中menu菜单组件的大坑
Vue中点击active并第一个默认选中功能的实现
mjllove的博客
03-18 2022
Vue中点击active并第一个默认选中功能的实现 循环出来的标签 <text class="hao" :class="[{active: activeName == item}]" @click="Change(item)" v-for="(item,index) in danList" :key="index" >{{item}}</text> data里的数据 danList:[ 'B1','B2' ], activeName: 'B1',
前端Vue.js导航栏封装组件使用教程
在Vue中，我们可以将导航栏封装成一个独立的组件，这样可以在多个页面中重复使用，提高开发效率。 4. Vue组件： 在Vue中，组件是可复用的Vue实例，具有自己的模板、数据、计算属性、方法等。组件的创建和使用，是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值