解决vue的数组渲染不更新的问题

最新推荐文章于 2024-04-24 10:44:34 发布
最新推荐文章于 2024-04-24 10:44:34 发布
阅读量1.6k 收藏
点赞数
文章标签： vue 数组 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sfx_ss/article/details/115449908
版权

问题描述

vue项目中通过v-for渲染列表，数组数据更新后，视图没有没有同步更新。

问题解决

经过排查发现是使用v-for渲染列表的时候，采用数组的索引值来绑定key值，所以当数组变化的时候，key并未发生变化，所以就复用了组件，才会出现数组中的内容更新了，但是视图却没有按我们想的那些更改。
在这里插入图片描述

结论验证

  我是根据数组渲染对应的组件。以索引为key的时候，我在子组件的created里打印了一句话，初始化的时候数据有几项，就打印几次，但是数组改变后，就不在打印了。
  以唯一的id为key的时候，数组改变的时候，还会继续打印。
即证明了我的猜想，是因为绑定了索引值为key的时候。v-for的就地更新机制导致的。换一个唯一的key就ok啦
  如果恰好解决了你的问题的话，可以点个赞哈，一起努力!!!

sdfeuir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-for做翻页时，数据没刷新。（key值重复的原因）
ltf_1225的博客
04-10 535
先写上结论，最后再写由来。 v-for涉及到分页的时候，key值不要单纯用index，或者`string${index}`。因为翻页后，index还是0-9。用ID等 有个需求，分页展示步骤图。 like this: 然后做的时候不细心，key值写成了v-for的index。然后文字信息刷新了。理所当然的以为正确了。 后来测试发消息给我说当前节点不对，和后台设置的对不上。开始查找缘由，经过...
vue中v-for绑定数组，当数组变化时页面数据不更新（已解决）
热门推荐
qq_42586895的博客
01-24 2万+
vue中v-for绑定数组，当数组变化时页面数据不更新（已解决）问题描述：原因解决 问题描述： vue中v-for通过{{}}或者v-model在页面里绑定一些数组时，数组里的值发生变化，页面并没有更新。举个最简单的例子： 这里定义一个数组，设置一个元素为1，分别使用{{}}和v-model绑定数组元素arr[0]，设置一个button，绑定一个点击事件，让数组中的值+1。这里不使用v-for了，...
学习总结：关于在vue中使用方法修改数组无法实时更新到页面中这个问题
dht_0379的博客
04-24 116
【代码】学习总结：关于在vue中使用方法修改数组无法实时更新到页面中这个问题。
vue中v-for循环key值问题研究
Bekind2010的专栏
04-25 7581
介绍 关于key的作用，官方是这样描述的： ​ key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 之前不知道在哪里看的文章，一直以为使用key是为了就地复用，但是从上面的描述中可以看到
vue 修改v-for 循环内的item数据视图不刷新
weixin_46787337的博客
11-15 2021
1.子组件不应该修改外部数据，应该通知父组件修改数据2.在不方便通知父组件修改数据时，父组件应该传ref给子组件不然子组件修改的数据永远数复制品，没有效果。
vue v-for循环改变循环数据视图不更新
qq_27437073的博客
07-11 1万+
在前端开发中如下图菜单框架（左侧菜单内容由顶部菜单点击后动态更新data内 menu:[] ）v-for循环menu显示左侧菜单 问题：点击顶部菜单后（menu[]重新赋值），左侧菜单不能更新为新的menu[]里的内容。 原因： 由于 JavaScript 的限制， Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = ...
Vue 数组和对象更新,但是页面没有刷新的解决方式
10-16
这将强制组件重新渲染，但请注意，这不会触发任何计算属性或侦听器的更新，所以它并不总是解决问题的最好办法。 总结来说，当Vue数组或对象的更新未能触发视图刷新时，通常是因为我们以非响应式的方式改变了数据。...
解决vue数组中对象属性变化页面不渲染问题
01-19
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下： push() pop() shift() unshift() splice() sort() reverse() 你打开控制台，然后用前面例子的 items 数组调用变异方法：example1....
vue 解决数组赋值无法渲染在页面的问题
10-16
今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue 数组和对象渲染问题
10-17
在Vue.js中，数组和对象的渲染问题是开发者经常会遇到的挑战。Vue的响应式系统依赖于数据劫持来实现视图与数据的双向绑定。当数组或对象的属性发生变化时，视图通常会自动更新以反映这些变化。然而，由于JavaScript...
Vue解决data数据改变时，v-for无法实现实时更新dom元素的问题(template中代码的局部刷新)
weixin_40745445的博客
04-24 7388
问题描述 利用Vue做项目过程中，经常使用v-for渲染多个重复组件或dom元素，比如：传递json/字典，利用v-for遍历json中的key和value，并渲染到页面中，改变元素的顺序，如下所示： <el-card class="content-card" v-for="(questionsData,i) in form.questionsData"> //具体的业务 ...... </el-card> 然而，v-for在设计过程中，无法实现对数据的双向绑定，也就
v-for 中的key的作用是什么？
weixin_43912756的博客
08-28 930
就地复用策略 vue在进行列表渲染的时候，会默认遵守就地复用策略：直接对已有的标签进行复用，不会整个的将所有的标签重新删除和创建，只会重新渲染数据，然后再创建新的元素，直到数据渲染完成。 key key属性可以用来提升v-for渲染的效率，使用v-for的时候，vue需要给每个元素添加一个key属性，这个key属性是唯一的，可以避免数据混乱的情况出现，vue对列表进行渲染的时候，就不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去 ...
Vue 数值改变 页面没有刷新（解决数据改变视图不更新的问题）
c_x_m的博客
05-12 1万+
解决数据改变视图不更新的问题情况描述原因解决方案当表格数据改变，表格没刷新时，并且使用了render解决方案 情况描述 值（List）修改后，打印值改变了，但页面数据没刷新 如何赋值：this.tableData[index] = { ...this.tableData[index], ...result } 想法：利用解构赋值，修改对应key的value值 例：this.tableData[index] = {id:1,name:jarry} result={id:2} 原因 解构赋值 如
uniapp使用v-for页面不刷新解决办法
herojeo的博客
11-11 1310
DOM中的列表却没有更新。
Vue数据绑定失败，v-if，:key，变异方法刷新无用的解决方案
m0_62402896的博客
11-11 457
Vue数据绑定失败，v-if，:key，变异方法刷新无用的解决方案，可能是绑定的逻辑没有直接修改
dom不刷新 vue 加数据后_踩坑vue v-for操作DOM后不更新
weixin_39523887的博客
12-21 744
踩坑vue v-for操作DOM后不更新前言最近在看vue的风格指南时，发现了一个以前在学习，甚至开发时忽略的问题。现象看到上面的一段话，想到自己在刚开发的时候遇到过类似的问题。就是在强行修改DOM后(比如改变class)；将v-for 模板数组中，改变的这条删除掉，发现，该class还在。延伸到的场景就是先选择一个或者多个列表，改变了样式(表明该列表被选中)，再删除选中的类别。此时发现该样式还在...
Vue.$set()如何对二维数组进行更新
qq_42132814的博客
09-28 3454
我们在处理vue项目的时候，可能经常会遇到数据变化，但是视图并没有实时渲染的情况，主要有两种情况 1、使用索引值操作数组时 使用索引值去更新数组时会出现数据变化试图却没有更新的情况，比如使用了push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法操作数组，或者是直接通过ary[index]操作数组都会出现这种情况 2、对象的增加或者删除属性时 由于 Vue 会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在..
vue中元素重复出现，数据不更新——加key解决
qq_42931285的博客
04-28 1218
diff算法、数据或元素结构错乱、数据不刷新
vue数据不更新解决方法
weixin_53954018的博客
07-16 4555
由于JavaScript的限制，Vue不能检测数组和对象的变化。原因由于Vue会在初始化实例时对property执行。对象上存在才能让Vue将它转换为响应式的。转化，所以property必须在。
vue数组包数组渲染
最新发布
06-21
在 Vue 中，当你需要渲染数组数据时，可以使用内置的 `v-for`指令来遍历和显示数组内容。`v-for`指令的工作原理类似于 HTML 的`<foreach>`，但它在 Vue 的模板编译过程中更加高效。 当你有如下的数据结构： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值