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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
js取模(求余数)隔行变色
May 15 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 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使用Imagick生成图片的方法
2015/07/31 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
js 页面输出值
2008/11/30 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
读书活动实施方案
2014/03/10 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
会计求职信
2014/05/29 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
2014年大学生工作总结
2014/11/20 职场文书
计生个人工作总结
2015/02/28 职场文书
微信小程序和php的登录实现
2021/04/01 PHP