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 相关文章推荐
基于jQuery的倒计时插件代码
May 07 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
Vue如何清空对象
Mar 03 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
PHP变量内存分配问题记录整理
2013/11/27 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
Python格式化css文件的方法
2015/03/10 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python通过future处理并发问题
2017/10/17 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
python实现磁盘日志清理的示例
2020/11/05 Python
商务英语求职自荐信范文
2013/12/24 职场文书
跟单文员岗位职责
2014/01/03 职场文书
厂区绿化方案
2014/05/08 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
学生检讨书如何写
2014/10/30 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers