解决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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
Vue组件化开发思考
Feb 02 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
微信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的异常处理类Exception的使用及说明
2012/06/13 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
代码生成器 document.write()
2007/04/15 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
浅析return false的正确使用
2013/11/04 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
简介Django中内置的一些中间件
2015/07/24 Python
python机器学习实战之K均值聚类
2017/12/20 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python 实现IP子网计算
2021/02/18 Python
介绍一下XMLHttpRequest对象
2012/02/12 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
课题研究阶段性总结
2015/08/13 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
区域销售大会开幕词
2016/03/04 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android