vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show


Posted in Javascript onApril 12, 2019

需求:点击btn,弹出modal显示图表(以折现图为例)

这应该是很基本的需求也是很容易实现的,代码和效果如下:

代码解释:setTem是一个方法,改变modal为true,默认为false ; chart-line是图表子组件,通过data向其传递参数,data绑定的数据是父组件mounted后拿到的数据

vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

效果图:点击btn后的确显示了modal框,但是里面的图表不能显示,接着改变子组件任何代码,迫使重新编译子组件,则子组件的图表可以正常显示

vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

分析:当点击btn时,modal框的确弹出来了,但推测其底层是使用v-show来实现显示与否,所以改变modal为true或fasle只是改变了样式的显示与隐藏,所以不会触发子组件的重新编译,父组件在mounted前,已经准备好了所有的视图,包括子组件的视图,只是这个时候由于modal的v-show=false,不能被观察到罢了。但是此时传给子组件的数据并没有拿到,所有子组件不能显示图表;当点击btn的时候,虽然此时父组件传给子组件的数据拿到了,但由于是通过v-show改变显示与否,子组件不会重新编译,当然不会去读取数据,就不会显示

解决办法:当点击的时候显示的促使子组件编译,给子组件套一个v-if,代码如下:

vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

效果图:当每次点击的时候都会重新编译子组件,所以子组件在每次编译的时候都能拿到数据,自然能正常显示

总结:以上是对vue中使用iview的modal组件解决的一个小问题,推测其使用的是v-show来控制弹出层的显示与否,当子组件不是简单的显示基本信息而是要更新数据时就需要显示的促使其重新编译,否者数据无法得到更新。

以上所述是小编给大家介绍的vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
jquery uaMatch源代码
Feb 14 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
JS实现标签页切换效果
May 04 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 #Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 #Javascript
JS实现li标签的删除
Apr 12 #Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 #Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 #Javascript
如何检查一个对象是否为空
Apr 11 #Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 #Javascript
You might like
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
python中的数据结构比较
2019/05/13 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
新手学python应该下哪个版本
2020/06/11 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
numpy实现RNN原理实现
2021/03/02 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
女大学生个人求职信
2013/12/09 职场文书
工作表现自我评价
2014/02/08 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
保护环境建议书400字
2014/05/13 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers