vue项目多层循环，动态改变数据时试图不更新

最新推荐文章于 2024-01-25 11:55:45 发布
最新推荐文章于 2024-01-25 11:55:45 发布
阅读量747 收藏
点赞数 2
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48787059/article/details/114001481
版权

今天写项目时，因为是多层循环，当我动态改变数据时，试图不会跟着更新，但是log出来的数据是会跟着改变的，我查了资料，找到一个很简单的方法，如下

this.$forceUpdate();//放在你动态改变数据地方的第一行，比如方法的第一行

亲测有效，如果大佬有更好的方法，欢迎下方评论区畅所欲言！

酥唯
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实例分析vue循环列表动态数据的处理方法
01-19
调用方法：Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> &...
vue改变循环遍历后的数据实例
10-16
今天小编就为大家分享一篇vue改变循环遍历后的数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目v-for循环出来的数组数据更新却没有更新视图
weixin_30836759的博客
08-12 3015
在uni-app项目中发现此问题，最终加入此行代码用于强制渲染即可解决： this.$forceUpdate() 　　 转载于:https://www.cnblogs.com/BlueCc/p/11341674.html
vue 循环向数组里push进数据,视图没有更新
湾流~ 的博客
08-15 3691
如下代码,将myringList里的数据循环遍历出来,子元素Type=7的,就将这个元素push进movieList数组的data属性中,这种方法数据视图是不会更新的 this.myRingList.forEach(function(item){ if(item.Type==7){ this.movieList.data.push(item) }else{ this.musicList.data.push(item) } }) 这是可以创建
Vue内嵌套层级过深，el-input改变值视图无响应
最新发布
daimaxiaodao的博客
01-25 687
1.v-for内绑定复杂类型数据内部值，通过input更改其值时。2.element表单或表格等组件内部，el-input绑定复杂类型数据内部值，通过input更改其值时。
vue 页面元素加载使用v-for循环时改变集合数据内容未刷新问题
whhmkj的专栏
05-07 795
使用 this.$forceUpdate() 加载你修改集合数据后的末尾执行。
多层循环视图和数据都不更新，组件被复用
wencun184的博客
07-15 168
为啥我数据传着传着不响应了
Vue 实现动态循环出的多个select 不能重复选择相同的数据
01-20
Vue 实现动态循环出的多个select 不能重复选择相同的数据前言效果图演示实现逻辑代码总结 前言 1.本篇文章功能的实现是基于vue的计算属性computed 2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算...
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue动态路由:路由参数改变,视图不更新问题的解决
10-16
今天小编就为大家分享一篇vue动态路由:路由参数改变,视图不更新问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中数据更新视图不更新的问题
weixin_30298497的博客
03-03 190
遇到这样一个问题, 代码如下: this.memberLevelList.forEach(item => { 　　item.levelDate =[item.startTime, item.endTime]; }) startTime和endTime是从后台获取的数据, 但是模板中需要levelDate, 于是直接赋值, 最后打印的memberLevelList结果中也有le...
vue页面数据不更新，不变化
hupi666的博客
02-01 814
vue 页面不更新，vue视图没变化
vue项目，多层数据嵌套，底层数据更新，页面无法更新
五颜六色的白
07-17 737
vue项目，多层数据嵌套，底层数据更新，页面无法更新
vue多层循环，动态改变数据后渲染的很慢或者不渲染
qq_52317104的博客
09-13 1469
原因是因为vue检测速度很慢，因为多层循环了，在VUE 2.x的时候还能渲染出来，1.x的时候压根渲染不出来。 解决方式： 在动态改变数据的方法，第一行加上 this.$forceUpdate(); 就可解决渲染慢or渲染不出来的问题 ...
vue2表格input框视图不更新的解决办法
qq_44230631的博客
03-13 710
【代码】vue2表格input框视图不更新的解决办法。
vue循环后不能下滑_Vue 循环后的数据更改无法响应。
weixin_32687311的博客
01-13 241
数组循环渲染到视图上，点击dom 改变数组中的一个布尔值来更新 该dom的class。发现数据变了，但相应的class 并没有根据改变后的布尔值去渲染。原始数据是created 里面获取的，赋给了一个needItemshow() 里面将 点中的item 传入 showArr；showArr 再渲染另一个dom ，该dom 下面的每项都可以通过点击来切换 class。 是通过show() 里面刚加的...
VUE爬坑之数据更新视图未更新
my_love_download的博客
11-11 262
这几天做的VUE项目遇到一个小坑,在这这里记录一下 1.项目是hybrid开发,使用的技术是MUI+VUE,在做一个列表渲染时,点击之后需要再次去渲染列表,发现数据已经更新,但是视图没有发生改变,通过VUE的官方网站可以知道,是因为VUE没有检测到数据的变化,解决方案: // 使用数组方法splice // vm vue实例对象 // violationRuleList 数组 //searc...
解决Vue中数组值更新视图不更新问题
qizi_的博客
09-08 684
Vue 中list值更新 视图不更新问题 通过操作改变已经渲染成表格的list中某行的值,通过输出可以看到值是被更新了但是页面上还是老数据 我们使用this.$set去更新的整个数组中某一坐标才会触发视图更新,当时如果我们只想更新某一个属性怎么办 使用push()使其变异 再使用pop()删除添加的坐标引发数组变异而引起视图更新 list.push({}) list.pop() //页面中视图刷新 ...
vue中动态改变对象或是数组数据，
jiangchengnihao的博客
10-14 3418
vue中动态改变对象或是数组数据，保证页面也是跟着随时改变的 可以改变的有三种办法 很多时候我们改变了数据，但页面却没有实时更新，这是我们需要判断此时的值是否为响应的。我们试着打印对象或数组，当在控制台中显示的是这样的时候则图片中显示的所有字段均为响应式数据 第一种:改变引用 data：{ object：{ name:'奥特曼'， age：'无法探知' } } object = { name:'奥特曼', age：'无法探知', hobby：‘打怪兽’ } 第二 种:是用数组api pu
vue 数据不动动态更新
05-12
Vue.js 使用双向数据绑定机制来实现数据的动态更新。当数据发生变化时，Vue.js 会自动更新视图，反之亦然。但有时候，数据没有进行动态更新，这可能是由于以下原因： 1. 没有正确地绑定数据：Vue.js中，使用 v-model 或者 :value 绑定数据，确保数据能够正确地传递到组件中，从而实现动态更新。 2. 数据没有正确地改变：如果数据没有改变，视图也不会动态更新。确保数据的改变能够触发视图的更新。 3. 异步更新问题：如果数据的改变是在异步操作中进行的，则可能会出现更新问题。Vue.js 提供了 $nextTick 方法，用于在下次 DOM 更新循环结束后执行回调函数，以确保异步操作完成后视图能够正确地更新。 4. 对象和数组的问题：当使用对象或数组作为数据源时，如果没有进行正确的操作，可能会导致更新问题。例如，如果直接修改对象或数组的属性，则可能无法触发视图的更新。可以使用 Vue.set 或者 this.$set 方法来更新对象或数组。 以上是一些可能导致 Vue.js 数据无法动态更新的原因，你可以根据情况进行检查和修复。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值