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 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
js清理Word格式示例代码
Feb 13 Javascript
原生javascript获取元素样式
Dec 31 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
bootstrap table实例详解
Jan 06 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
node实现的爬虫功能示例
May 04 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
使用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
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python实现扫雷小游戏
2020/04/24 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript