解决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 相关文章推荐
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
xml转json的js代码
Aug 28 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
python搜索算法原理及实例讲解
2020/11/18 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
css3选择器基本介绍
2014/12/15 HTML / CSS
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
工作交流会欢迎词
2014/01/12 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
就业推荐表导师评语
2014/12/31 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
辞职信格式范文
2015/05/13 职场文书
学生会任命书范本
2015/09/21 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android