解决vue-router 二级导航默认选中某一选项的问题


Posted in Javascript onNovember 01, 2019

现在有一个需求是这样的:

解决vue-router 二级导航默认选中某一选项的问题

这个需求很正常吧! 二级导航条,不是二级路由的(如果是二级路由是用linkActiveClass来做,我之前文章说过),是单纯获取数据的按钮,当这个页面出现时,默认选中第一项。

首先:

解决vue-router 二级导航默认选中某一选项的问题

解决vue-router 二级导航默认选中某一选项的问题

解决vue-router 二级导航默认选中某一选项的问题

上面的判断的意思是:如果你点击某一个选项把这个index传过去,activeName等于那一个传过来的index(index是遍历出来的数据如:1,2,3,4,5),就显示该个active或者index==pid,pid默认为0,所以index==0,就是默认第一个选项被选中。

但是当我点击其它项的时候,要把那个pid改为false,只能把这个false赋值给uid,uid却不能在data里而声明,因为组件遍历v-for是时候就默认执行了selected()这个函数,所以只能把这个赋值给全局

解决vue-router 二级导航默认选中某一选项的问题

我目前只能用这个方法解决这个问题,如果有更好的方法,希望可以共享一下

以上这篇解决vue-router 二级导航默认选中某一选项的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 #Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 #Javascript
vue实现计步器功能
Nov 01 #Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 #Javascript
js canvas实现星空连线背景特效
Nov 01 #Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
微信小程序定义和调用全局变量globalData的实现
Nov 01 #Javascript
You might like
php的urlencode()URL编码函数浅析
2011/08/09 PHP
二招解决php乱码问题
2012/03/25 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
Python实现简单的代理服务器
2015/07/25 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Python八皇后问题解答过程详解
2019/07/29 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
我的小天地教学反思
2014/04/30 职场文书
优秀班主任申报材料
2014/12/16 职场文书
兵马俑导游词
2015/02/02 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏
python数字图像处理实现图像的形变与缩放
2022/06/28 Python
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库