vue列表数据发生变化指令没有更新问题及解决方法


Posted in Javascript onJanuary 16, 2020

问题描述,在vue的for循环中使用了指令,然后对数据进行筛选的时候,发现指令没有起作用。

vue列表数据发生变化指令没有更新问题及解决方法 

如图前面的图标是根据文件名的后缀名,返回响应图标的,通过指令实现的。然后我们在搜索框中删选以后,数据更新了,但是图标没有更新

分析原因

<div v-for="(item, index) in myDate" :key='index'>
...
</div>

问题就出在了:key='index'因为vue中for循环是根据key的值的变化来更新vnode的,很显然我们经过筛选如果删选出三条数据,那么index = 0, 1, 2没有变化,所以vnode没有更新

解决办法1:我们设置:key的时候最好使用每条数据的id这样就是唯一的,每次筛选,vnode都会更新。

解决办法2:在指令中设置

// 添加bind设置
bind: function (el, binding, vnode) {
 // bind中的vnode里面的key可以给设置一个随机数,这样每次都会更新虚拟节点。
 let num = parseInt(Math.random() * 10)
 vnode.key = num
},
inserted: ...

总结

以上所述是小编给大家介绍的vue列表数据发生变化指令没有更新问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
使用Karma做vue组件单元测试的实现
Jan 16 #Javascript
js实现div色块拖动录制
Jan 16 #Javascript
微信小程序实现二维码签到考勤系统
Jan 16 #Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 #Javascript
JavaScript实现简单的计算器
Jan 16 #Javascript
js面向对象之实现淘宝放大镜
Jan 15 #Javascript
js实现简单的打印表格
Jan 15 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
php stripslashes和addslashes的区别
2014/02/03 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
EJB的基本架构
2016/09/22 面试题
农村婚礼证婚词
2014/01/10 职场文书
销售简历自我评价
2014/01/24 职场文书
中专自我鉴定
2014/02/05 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
婚前协议书范本
2014/04/15 职场文书
小学一年级评语大全
2014/04/22 职场文书
抽样调查项目计划书
2014/04/24 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
打架检讨书范文
2015/01/27 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Python中json.dumps()函数的使用解析
2021/05/17 Python
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
js 数组 fill() 填充方法
2021/11/02 Javascript