解决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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
微信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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
php实现递归的三种基本方式
2020/07/04 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP实现微信退款功能
2018/10/02 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
js比较日期大小的方法
2015/05/12 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
python连接池实现示例程序
2013/11/26 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
python遍历目录的方法小结
2016/04/28 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
python可视化实现KNN算法
2019/10/16 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python计算导数并绘图的实例
2020/02/29 Python
python新手学习使用库
2020/06/11 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
艺术爱好者的自我评价分享
2013/10/08 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
专升本个人自我评价
2013/12/22 职场文书
实用的简历自我评价
2014/03/06 职场文书
论群众路线学习笔记
2014/11/06 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书