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 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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与php MySQL 之间的关系
2009/07/17 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
python实现无边框进度条的实例代码
2020/12/30 Python
大学生通用个人的自我评价
2014/02/10 职场文书
质量月活动策划方案
2014/03/10 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
工作保证书怎么写
2015/02/28 职场文书
员工自我评价范文
2015/03/11 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
MongoDB支持的索引类型
2022/04/11 MongoDB