解决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 相关文章推荐
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
基于javascript实现放大镜特效
Dec 03 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
天津市收音机工业发展史
2021/03/04 无线电
模仿OSO的论坛(四)
2006/10/09 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
使用正则替换变量
2007/05/05 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python模拟用户登录验证
2017/09/11 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
函授大学生自我鉴定
2014/02/05 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
好媳妇事迹材料
2014/12/24 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
mysql如何查询连续记录
2022/05/11 MySQL