解决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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
JS验证字符串功能
Feb 22 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
python解析xml文件实例分析
2015/05/27 Python
详解Python pygame安装过程笔记
2017/06/05 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
保健品市场营销方案
2014/03/31 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
狂人日记读书笔记
2015/06/30 职场文书
升学宴来宾致辞
2015/07/27 职场文书
会计主管竞聘书
2015/09/15 职场文书
新手入门Mysql--概念
2021/06/18 MySQL