一. 在iview中写一个submenu

        <Col span="3" type="flex" v-if="showCids">
<Menu
ref="menus"
theme="light"
active-name="0"
@on-select="selectMenu"
width="auto"
>
<MenuGroup title="cid">
<MenuItem v-for="(cid, index) in cids" :key="index" :name="index">
{{ cid }}
</MenuItem>
</MenuGroup>
</Menu>
</Col>

因为这个subMenu是动态生成的, 他的name我设置为动态生成过程中的index, 所以第一个subMenu的name是0.

根据上述设定, 参考官网的说明,使用activeName="0"来表示激活的name, 还特别注意力name是string而不是int基本数据类型. 所以就通过这种方式让subMenu0呈现激活态. 很好, 并不work下面是高能的踩坑过程, 如果不想看可以直接跳转 "三. 解决方法"

二. 踩坑全过程

根据网上的资料, 我迅速的发现了解决问题的路径. "因为subMenu是动态展开的"--->所以需要调用updateActiveName()方法, 在subMenu的数据填充之后进行调用. 然后我就根据网上的教程和iview官网的描述吭呲吭呲学了半个多小时. 因为在调用这个函数的时候我碰到了很多问题. 最重要的问题就是我根本找不到这个函数的调用入口, 说人话就是谁来调用这个函数. 教程上说是this.$refs.menu.updateActiveName(). 这行话含义就深了, 作为前端菜鸟根本把握不住. 首先refs是社么? 其次menu又是什么? 最后this.$nextTick() 为社么在这个函数里没有出现? 当然更新的新手会问this.$nextTick()是什么, 他为什么要在这里出现.

所以这个问题递归的层数真的够多的, 有多多呢? 看图吧.

所以首先需要解决的就是找到找到$refs的问题, 怎么找呢?

找个傻得得儿, 根本就不可能找到好嘛. 因为这是自己定义的,而恰好官网的示例中没有定义这个属性. 就是这行代码了

<Menu ref="menu">
<MenuGroup>
//...
</MenuGroup>
</Menu>

其中ref的值可以任意修改. 只要this.$refs.menu和ref=menu对应就可以.

然后就要集中经历解决this.nextTick()在哪里调用的问题. 好吧这其实不成为问题. 只不过因为当时错误的归因, 所以在这条路上走的深入了一些.

那么view渲染的过程会有create, before mount, mount这些步骤. 于是我又简单学习了一下他们的区别. 主要的区别就是数据是否已经append到变量中. 只有mount成功才能确保数据mount成功.



后来发现时机不是问题. 只要在调用数据的函数后面调用. 但是一定一定要在之前让v-if的判断条件为真. 毕竟我之前给自己埋了个坑. 为了让界面美观, 在subMenu 没有数据的时候我是隐藏它的. 所以...总之, 埋坑这件事我一直可以的.如果不做程序员改行作家, 我应该能顺便卖刀片. 哈哈哈发家致富新途径说不定央视致富经都得找我做节目的那种.

所以this.$refs.menu一直是undefined就很合理了, 毕竟都没有visible啊, 当然不会渲染啊, 不渲染怎么会被拿到$refs.啊啊啊, 坑王竟是我自己.

然后就顺理成章在拿到数据之后, 调用

menuChange(_index) {
this.activeName = _index.toString();
this.$nextTick(() => {
console.log("menuChange ", this.activeName, this.$refs.menus.currentActiveName, this.$refs.menus)
this.$refs.menus.updateActiveName()
})

非常完美的发现还得用this.activeName?????既然如此, 为什么不直接动态数据绑定呢? 我这一圈子图啥呢? 图样图森破吧.

当然上述代码去掉 this.activeName = _index.toString();也是能运行良好的. 但是那样每次调用menuChange就标识默认值. 函数名最好换成defaultSubMenu

三. 解决方法

法一

defaultSubMenu() {
this.$nextTick(() => {
this.$refs.menus.updateActiveName()
})

获取完数据之后调用, 指向默认subMenu-->name='0'

法二

        <Col span="3" type="flex" v-if="showCids">
<Menu
ref="menus"
theme="light"
:active-name=dynamicAcName
@on-select="selectMenu"
width="auto"
>
<MenuGroup title="cid">
<MenuItem v-for="(cid, index) in cids" :key="index" :name="index">
{{ cid }}
</MenuItem>
</MenuGroup>
</Menu>
</Col>

动态修改一下acitve-name属性. 接收完数据之后, 为this.dynamicAcName赋值.

iview 酸爽debug: subMenu默认选中无效的解决方法的更多相关文章

  1. 用jQuery的attr()设置option默认选中无效的解决 attr设置属性失效

    表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 在手机端有些浏览器用jQuery的attr()方法设置sele ...

  2. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  3. WPF:指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效的解决方法

    文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序 ...

  4. 移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  5. js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...

  6. redhat linux enterprise 5 输入ifconfig无效的解决方法

    redhat linux enterprise 5 输入ifconfig无效的解决方法   在安装完成linux后,进入终端,输入命令行ifconfig,会提示bash: ifconfig: comm ...

  7. 排错-安装SQl 2008“为SQL Server代理服务提供的凭据无效的解决方法

    安装SQl 2008“为SQL Server代理服务提供的凭据无效的解决方法 by:授客 QQ:1033553122 在Windows Server 2008安装SQL Server 2008出现的问 ...

  8. Node.js中针对中文的查找和替换无效的解决方法

    Node.js中针对中文的查找和替换无效的解决方法.   //tags的值: tag,测试,帖子 var pos1 = tags.indexOf("测"); //这里返回-1 ta ...

  9. QWidget子窗口中setStyleSheet无效,解决方法

    继承 QWidget setStyleSheet无效,解决方法. 发现 继承自QWidget的自定义类 ,使用setStyleSheet无效, 如果删除头文件中的 Q_OBJECT,setStyleS ...

随机推荐

  1. 彻底弄懂小程序e.target与e.currentTarget

    一.小程序中关于事件对象  e  的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...

  2. Python入门-多进程

    1.获取本机CPU # 早期的CPU是单核:实现多个程序并行,在某一时间点,其实只有一个进程 # 后来硬件多核CPU:多个进程是并行执行. from multiprocessing import cp ...

  3. centos7源码安装mysql5.7.19

    centos7源码包安装mysql5.7 5.7.20安装方法和5.7.19的一样. 1.安装前准备 清空环境.安装相应的软件包 1>关闭防火墙和SELinux 2>配置yum源(阿里云, ...

  4. openoffice将word转pdf中文乱码或消失的坑

    将windows系统下的中文字体文件(C:\Windows\Fonts),放到/usr/share/fonts下,必须重启openoffice.

  5. Java语言学习day10--7月9日

    ###09方法的重载 * A: 方法的重载 * 在同一个类中,方法名相同,参数列表不同.与返回值类型无关. * 参数列表不同: * A:参数个数不同 * B:参数类型不同 * C:参数的顺序不同(算重 ...

  6. JS DOM简介

    1. 概述 文档对象模型(Document Object Model,简称 DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口.W3C 已经定义了一系列的 DOM 接口 ...

  7. Python 函数进阶-高阶函数

    高阶函数 什么是高阶函数 高阶函数就是能够把函数当成参数传递的函数就是高阶函数,换句话说如果一个函数的参数是函数,那么这个函数就是一个高阶函数. 高阶函数可以是你使用def关键字自定义的函数,也有Py ...

  8. .Net Core Razor动态菜单实现

    准备 1.框架 .netcore  版本 yishaadmin开源框架 2.模板 本文模板使用adminlte3.0,文档地址https://adminlte.io/docs/3.0/ 3.菜单表 关 ...

  9. 【CSAPP】Shell Lab 实验笔记

    shlab这节是要求写个支持任务(job)功能的简易shell,主要考察了linux信号机制的相关内容.难度上如果熟读了<CSAPP>的"异常控制流"一章,应该是可以不 ...

  10. 常问的MySQL面试题集合

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 除了基础题部分,本文还收集整理的MySQL面试题还包括如下知识点或题型: MySQL高性能索引 ...