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 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
js实现列表按字母排序
Aug 11 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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中文本操作的类
2007/03/17 PHP
php中的strpos使用示例
2014/02/27 PHP
PHP类的封装与继承详解
2015/09/29 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
JS array 数组详解
2009/03/22 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
Three.js快速入门教程
2016/09/09 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Django框架实现的分页demo示例
2019/05/25 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
秸秆管理实施方案
2014/03/15 职场文书
消防安全责任书范本
2014/04/15 职场文书
天坛导游词
2015/02/02 职场文书
机关保密工作承诺书
2015/05/04 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
大学入学感言
2015/08/01 职场文书
公司员工管理制度
2015/08/04 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python