解决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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
JavaScript数组方法的错误使用例子
Sep 13 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP扩展开发入门教程
2015/02/26 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
Electron 如何调用本地模块的方法
2019/02/01 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
浅析Django中关于session的使用
2019/12/30 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
高中政治教学反思
2014/01/18 职场文书
《学会待客》教学反思
2014/02/22 职场文书
勇敢的心观后感
2015/06/09 职场文书
小学生教师节广播稿
2015/08/19 职场文书
react 路由Link配置详解
2021/11/11 Javascript
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers