vue列表数据发生变化指令没有更新问题及解决方法
更新时间：2020年01月16日 10:24:39 作者：张旭超
这篇文章主要介绍了vue中使用指令，列表数据发生变化指令没有更新问题，本文给出了解决办法,需要的朋友可以参考下
问题描述，在vue的for循环中使用了指令，然后对数据进行筛选的时候，发现指令没有起作用。
如图前面的图标是根据文件名的后缀名，返回响应图标的，通过指令实现的。然后我们在搜索框中删选以后，数据更新了，但是图标没有更新
分析原因
<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列表数据发生变化指令没有更新问题及解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
vue组件 $children,$refs，$parent的使用详解
本篇文章主要介绍了vue组件 $children,$refs，$parent的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下2023-03-03
本文通过实例代码给大家介绍了vue仿百度搜索功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-02-02
本文主要介绍了Vue 中页面传值的多种方式小结,主要包括路由传参、Vuex 状态管理、Props 属性和事件传递数据这几种,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
在vue项目中,父子组件数据传递是最常见的场景,但是今天在开发过程中父级数据传递到子组件,控制子组件的显隐,下面这篇文章主要给大家介绍了关于vue3如何使用watch监听props中数据的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue install 注册全局组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue中三种插槽(默认插槽/具名插槽/作用域插槽)的区别详解
默认插槽，具名插槽，作用域插槽是vue中常用的三个插槽，这篇文章主要为大家介绍了这三种插槽的使用与区别，感兴趣的小伙伴可以了解一下2023-08-08
这篇文章主要介绍了vue配置font-awesome5的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本文通过示例代码介绍了vue时间戳和时间的相互转换方式,通过场景分析介绍了vue3使用组合式api将时间戳格式转换成时间格式（2023年09月28日 10:00）,感兴趣的朋友一起看看吧2023-12-12
最新评论