解决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计数器代码
Nov 04 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
js实现右键菜单功能
2016/11/28 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
python求众数问题实例
2014/09/26 Python
Python自动扫雷实现方法
2015/07/25 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
小区推广策划方案
2014/06/06 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
单位婚育证明范本
2014/11/21 职场文书
2016新年慰问信范文
2015/03/25 职场文书
拖欠货款起诉状
2015/05/20 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
PHP命令行与定时任务
2021/04/01 PHP
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL