uniapp/vue 解决数组更新但视图未更新问题

最新推荐文章于 2024-05-29 16:47:59 发布
最新推荐文章于 2024-05-29 16:47:59 发布
阅读量1.4k 收藏 1
点赞数
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45650243/article/details/131700810
版权 
开发时遇到问题：根据tab的切换掉接口返回展示不同的数据。结果问题就来了，数据确实是更新了，通过consloe.log()控制台也可以正常打印，但是视图却没有更新。
网上推荐的v-if，this.$forceUpdate()强制更新...几乎百度的方法都试过了，依旧没有效果，开始排查问题原因。

问题代码如下：

在这里插入图片描述
在这里插入图片描述
问题原因就在这里！！在这里插入图片描述

个人推测key的取值index不是唯一的,所以就地使用导致视图渲染错误，
解决办法就是：确保key的取值唯一性！
在这里插入图片描述
就此问题圆满解决，希望可以帮你们！

桀.月
关注
uni-app - 最新详细改变数据后视图无更新变化解决方案，更改数据不刷新（解决修改 data 中的数据视图未更新的问题）
王佳斌
11-26 2万+
uniapp数据更新视图不更新的问题，解决uniapp修改data中的数据视图未更新的问题，vue (uni-app)踩坑,数据改变,视图不变，uni-app 修改数据不刷新界面的问题，uni-app之数据状态改动后页面不刷新踩坑，(已解决)uni-app中对data的修改视图未更新的坑，uni-app之数据状态改动后页面不刷新踩坑，uniapp更改数据后不渲染页面_页面更改后列表视图不刷新，uniapp数据更新以后页面不更新，vue,uniapp改变属性值后视图不更新，UNIAPP页面数据不更新,js变量
详解Vue中数组和对象更改后视图不刷新的问题
12-03
为了解决这个问题，你可以使用 Vue 的数组变异方法，如 `Vue.prototype.$set` 或者直接在 Vue 实例上进行操作： ```javascript arr.splice(arr.length, 0, 4) // 使用 splice 方法更新数组，视图会更新 ``` 此外，...
uni-app - 改变数据后视图无更新变化解决方案，更改数据不刷新 uni-app坑
weixin_45901902的博客
01-19 5518
当页面数据全部请求完毕，但用户操作导致数据改变时，视图并未按照最新数据进行更新。有时候，我们动态改变数据的时候发现视图并未改变，（或者h5改变小程序并为改变）常见于在 methods函数或其他位置中，改变data数据的时候，虽然数据变了，但视图没有更新，本文提供两个解决方案，我上uni-app付费花了9.9元购买，（如下截图）在这里插入图片描述真的付钱了 好气好气100%解决该问题，非常好用，比如下面的代码，给data赋值后并没有在页面上有反应(实际console打印数据已经变了)∶。
uniapp数据更新视图不更新的问题
热门推荐
土拨鼠博客
02-22 1万+
强制更新 如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。 你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。 然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，那么你可以通过 $forceUpdate 来做这件事。 this.$forceUpdate() 更新某一个元素视图 Vue.set( target, propertyName/index, value ) 向响应式
解决数据修改，但是视图未更新
空&白的博客
05-02 3943
在uniapp或者vue中，有时候会遇到数据修改，但实际上视图的数据未更新的情况。 例如： 直接赋值就不会改变视图。 用this.$set()后，就可以更新视图。 但是当this.list.time有设置默认值时，不管直接是直接赋值还是用set()，都可以修改视图。emmmmm 算了，我鶸，就不追究原因了= =。 ...
uniapp js设置数据之后，页面不刷新显示的解决方法
qq_38389533的博客
12-03 4963
uniapp 设置页面数据之后，页面不刷新显示新数据的解决方法
uniApp 数据更新视图不更新
又是再见?
01-29 1329
使用uniApp开发了一个底座, 和H5子应用(也是通过uni开发, 打包成H5)之间通过 js-bridge 交互, 发现问题为: 通过点击底座 title 上的图标触发H5应用内的模态框时发现。, 模态框是通过一个页内 data 上的 show 动态的, 通过v-console 调试发现data上的数据是有改变了的。将原本放在组件内data 上的变量放到 vuex 的store 上。
vue 重塑数组之修改数组指定index的值操作
11-19
补充知识：vue中利用索引直接设置一个数组项，不能触发视图更新的问题 由于 JavaScript 的限制，Vue 不能检测以下数组的变动： 1、当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 2、当...
基于uniapp + vue + scss开发的云音乐项目仿写
最新发布
07-11
uniapp ******************************** 介绍 某音乐项目仿写，项目支持音乐播放、音量调节、扫码登录，搜索，视频MV播放，歌词等功能 安装教程 克隆项目 ...解决：使用this.$set()强制更新试图
vue3实现塔罗牌翻牌
09-07
在Vue3中实现塔罗牌翻牌功能是一个有趣且实用的Web开发应用场景，它涉及到Vue3的基本使用、组件设计、CSS动画以及响应式布局等多个知识点。以下是对这些知识点的详细说明： 1. **Vue3基础知识**：Vue3是Vue.js框架...
uni-app:从运行原理上面解决性能优化问题
01-27
而vue页面的视图层则是基于WebView，虽然经过优化，但在某些复杂场景下可能不如nvue。在数据更新上，app-vue和小程序采用的是页面级和组件级更新。对于复杂页面，使用组件化可以实现数据的局部更新，提高效率。 ...
uniapp vue 数据更新 视图不更新 处理方法 this.$set(）； this.$forceUpdate()；刷新
AAAXiaoApple的博客
04-12 1215
数据更新 视图不更新 处理方法 this.$set(）； this.$forceUpdate();
uniapp数据更新页面视图不更新
蔡定努
03-23 1万+
在watch函数中监听数据的变化，然后改变需要刷新的视图绑定的显示与否的关键字，强制重新渲染 <template v-if="update"> <!-- 单选 --> <radio-group v-if="data.question.type==1" name="answer" @change="addAnswer"> &lt...
vue （uni-app）踩坑，数据改变，视图不变
muge1161105403的博客
07-28 3359
前景： 由于要做一个展开效果，我打算在后端返回的数据中加一个字段用来判断每一项是否展开，如图所示： 很明显，数据改变了，但视图并没有改变，这是由于数据是后追加的，并没有被vue追踪。 所以需要使用 this.$set() 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 用法如下： Vue.set( target, propertyName/index, value ) 参数： {Object | Array} target {string | number} prop
unipp数组和对象更改后视图不刷新
cs007711的博客
05-29 808
2、$set 和 splice。
uniapp修改组件中的数组属性，视图不更新
weixin_51010848的博客
02-13 556
uniapp修改组件中的数组属性，视图不更新
uni-app列表数据更新后界面UI不更新问题可能的一种解决方法
七月七日晴52000的博客
01-03 2394
【代码】uni-app列表数据更新后界面UI不更新问题可能的一种解决方法。
uniapp解决明明更新了数据，界面却没有刷新的问题
CHENC0518的博客
03-09 9049
一般都是this指向的问题。 切记要用这种形式:()=>(箭头函数)，对数据进行赋值 否则就会使得this指向出问题。从而数据出错。 今天无敌开心，这几天因为后端数据库和前端预览图片展示的问题一直困扰着我，想了很多办法都没用，本来都想放弃了，今天没想到解决了超级开心。奖励自己等下点个宵夜。嘿嘿。 ...
vue和uniapp改变数据但是不改变视图的原因
pgzero的博客
05-28 2493
一、数组 1、当直接用索引直接设置一个项的时 例如：this.arr[index] = newArr 解决方法：this.$set(this.arr,index,newArr)； 2、当直接修改数组长度时 例如：this.arr.length = newLength 解决方法：this.items.splice(index,1,newArr) 或者this.items.splice(newLength) 二、对象 1、由于Javascript的限制，Vue不可以检测对象属性的添加或删除 var obj =
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值