解决Vue数组数据变化了，赋值后视图没更新的问题

原创 已于 2023-08-17 10:32:06 修改 · 5.2k 阅读 ·
大模型引用 5 次
cknow-ai 百思不得小李

cknow-ai 关注

标签
#vue.js #前端 #javascript
分类 前端开发
于 2023-03-20 17:44:45 首次发布
当Vue.js中表格数据变化直接赋值后视图未更新，原因在于Vue无法检测对象属性的添加或删除。解决方法是使用`this.$set`或通过数组方法如`map`创建新数组并赋值，确保数据响应式。本文介绍了如何通过`map`和`this.$set`更新数组并刷新视图。

最近遇到一个问题，表格数据变化了，直接赋值后视图没更新，打印表格数据发现是最新的数据，这主要是因为，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
如下图，最开始后端返给我10条数据，第一条数据是孝感米酒，但它没在页面显示出来。

请添加图片描述
最开始我是直接将后端返给我的数组res.result.listpg进行赋值，没显示出来，然后我用map处理了一下。通过map数组方法，对数组里面的每条数据进行重新处理，将返回的新的数组重新赋值给当前的数组。这等于是重新给这个数组变量赋值了，vue那边能监听到并且实时更新视图了。然后用set对数据条数进行了处理一下。vue里面给我们提供了set对数据条数进行了处理一下。vue里面给我们提供了set对数据

了解本专栏 订阅专栏 解锁全文 超级会员免费看
点赞 点赞 0
评论 0
书签 书签 2
Vue中动态修改文本不显示的解决方法
2301_79326857的博客
09-24 558
综上所述，当你在Vue中动态修改文本不显示时，可以首先检查数据绑定是否正确，然后注意异步更新的问题，使用$nextTick来确保获取到最新的文本内容。如果你需要根据某些数据的变化来更新文本内容，你可以使用计算属性来动态计算文本，并将计算结果绑定到模板中。如果你需要在数据变化时执行一些特定的操作，你可以使用侦听器来监听数据的变化并触发相应的操作。首先，确保你正确地进行了数据绑定。在这个示例中，我们先更新了文本内容，然后在$nextTick的回调函数中访问了DOM元素，确保我们获取到的是最新的文本内容。
Vue - 修改 data 数据不变 / 视图也不变（监测不到 data 数据变化 / 双向绑定失效）
🏆 前端领域优质创作者
06-30 3135
地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。只要值的地址没有改变，vue是检测不到数据变化出现这种问题后，响应式数据根本无法修改更新与变更，数据动不了非常头疼，最重要的是，基本上无从下手。本文所提供2个解决方案，请您依次进行尝试，如“使用正确”99%会生效。以下是个示例，请参考并完成核心代码抽取。 如果是数组的话，用法如下： 二、解决方案 上面的方法几乎可以大部分了，如果还是不行请尝试如下方案。 通过$set进行更新，通过$forceUpdate()进行更新
vue开发中，数据更新，但视图不刷新
Quentin0823的博客
07-07 3万+
我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到；第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到；**解决方法1：静默刷新(使用v-if的特性) 在修改值之后将元素销毁,然后在修改后的下一次DOM渲染完成时再显示出来,这样就会触发组件重新加载data的数据进行渲染,data中被修改的数据才是最新的。 解决方法2:Vue.$set(官方推荐) 使用这个api修改的数据会为其添加响应式gett
Vue中对象或数组数据更新但视图不刷新问题的解决策略
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
11-13 1万+
在vue中，数据的绑定都不用我们操心，例如在data中有一个 msg 的变量，你修改它，那么在页面上，msg 的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的 length 变成0，vue就无法知道发生了改变。
Vue数据更新视图不更新的几种解决方案
weixin_42504805的博客
07-19 9668
Vue数据更新视图不更新的几种解决方案
数组变化，但是无法更新视图（原因和思考）
dongnihao的博客
07-13 2442
写代码时候遇到数组更新后，视图不更新。一般的解决方案是重新解构赋值。 原因的话，其实一开始就想到了自己写Vue项目中遇到的问题。当时把annotations放到一个数组中，然后展现到视图层，让用户预览自己的所有pdf注释，然后遇到了注释数组更新，视图层不更新的问题。复习一下Vue2数据响应原理，（ 注：Vue3响应式改成了Proxy听说Vue3响应式原理变成了Proxy_董厂长的博客-CSDN博客）官方的解释很清晰：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue
Vuex 在 store 中更新数组后视图层不更新的问题
thothsun 的博客
02-27 5919
由于 js 的限制，Vue 无法进行监听数组的修改，因此在 Vuex 中，下面三种情况 store 中的数据已经变化了，但视图层不会更新： 使用索引更新数组的值时 修改数组的长度时 直接给对象数组中的对象赋值新属性时 解决方式：使用 Vue.set ( target, key, value ) import Vue from 'vue'; export const mutations = {...
uni-app - 最新详细改变数据后视图无更新变化解决方案，更改数据不刷新（解决修改 data 中的数据视图未更新的问题）
🏆 前端领域优质创作者
11-26 3万+
uniapp数据更新视图不更新的问题，解决uniapp修改data中的数据视图未更新的问题，vue(uni-app)踩坑,数据改变,视图不变，uni-app修改数据不刷新界面的问题，uni-app之数据状态改动后页面不刷新踩坑，(已解决)uni-app中对data的修改视图未更新的坑，uni-app之数据状态改动后页面不刷新踩坑，uniapp更改数据后不渲染页面_页面更改后列表视图不刷新，uniapp数据更新以后页面不更新，vue,uniapp改变属性值后视图不更新，UNIAPP页面数据不更新,js变量
uniapp开发数据更新后视图没变化的解决方法
weixin_45581741的博客
06-23 5829
uniapp开发数据更新后视图没变化的解决方法 我们在开发的时候会遇见一些问题，如数据更新了视图没有及时发生变化 常规开发中最常见的2种数据类型就是：数组和对象 在vue动态渲染种数组和对象经常会出现一些不渲染的情况如： 给数组赋值：arr[1] =1, 这样是不会触发渲染机制的 正确的做法是： vm.$set(vm.items, indexOfItem, newValue) / Vue.set(vm.items, indexOfItem, newValue) 这样才能触发渲染 vue上面说得很明白：跳转
3.为什么我的vue数据修改后视图未更新，梳理Vue2和Vue3中常见的数据不更新场景
qq_1401820561的博客
03-22 2604
Vue数据不更新问题的核心在于响应式机制的实现。Vue2受限于Object.defineProperty，需通过辅助方法（如$set）弥补不足；而Vue3通过Proxy提供了更完善的响应式支持。无论是Vue2还是Vue3，理解其原理并遵循“数据驱动视图”的原则，配合最佳实践，都能有效避免视图更新异常。
vue数据更新但不改变视图，解决办法？
smallmww的博客
08-07 5754
第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的； 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度；
Vue数据更新，页面却没有更新的几种情况及解决方法
热门推荐
LFQP_的博客
03-27 3万+
Vue数据更新，页面却没有更新的几种情况及解决方法
vue数据不更新解决方法
weixin_53954018的博客
07-16 4945
由于JavaScript的限制，Vue不能检测数组和对象的变化。原因由于Vue会在初始化实例时对property执行。对象上存在才能让Vue将它转换为响应式的。转化，所以property必须在。
（详解错误情况，及解决方法）Vue 数据更新了但页面没有更新的情况
m0_55333789的博客
08-09 1万+
（详解错误情况，及解决方法）Vue 数据更新了但页面没有更新的情况
vue中对象属性赋值后，页面不更新解决方案
天蚕土豆丝的博客
08-04 1万+
vue属性值变化后，页面不更新解决方法
vue 更新对象或数组更新后视图不刷新的问题
weixin_39975379的博客
02-21 1751
问题表现 在开发的过程中遇到一个问题，就是更新对象或数组后对应的视图值却不刷新。 官方解释 关于这个问题其实官方文档已经给出了很清楚的解释，想深入了解的小伙伴可以去扒官方文档。 https://cn.vuejs.org/v2/guide/list.html 渲染列表中的注意事项。 简单解决方案 出现这样问题的情景：已经初始化对象（数组），然后想要重新给对象（数组）的某一个属性（元素）重...
解决Vue中多层对象的数组属性push数据后视图不更新问题
qq_43598475的博客
12-06 7641
贴上部分代码： initObj.chatInfo.record.push({ from: 'other', content: res.data[i].Content, createTime: res.data[i].CreateTime, state: 1 }); 如上代码，initObj是我Vue的data中的一个数组其中一个对象，我是从Vue点击事件传参过来的initObj，此时执行以上代码...
Vue 解决数据更新视图不更新问题$set()方法
南城旧梦_de博客
05-10 3086
vue set()
vue项目，为什么控制台打印出来的数据变了，视图没更新呢???
最新发布
哎呦的博客
08-14 970
vue2和vue3 响应式监听
vue数据更新视图不刷新解决办法 vue中this.$set 的用法
m0_61672533的博客
05-08 1640
vue数据更新视图不刷新解决办法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值