Vue 修改data数据后视图没同步更新的解决方案

已于 2023-08-01 11:58:47 修改
阅读量2k 收藏 6
点赞数 4
分类专栏： vue js 文章标签： javascript vue.js es6 npm 前端
于 2021-03-25 18:40:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45295253/article/details/115215492
版权
js 同时被 2 个专栏收录
32 篇文章 0 订阅
订阅专栏
vue
19 篇文章 1 订阅
订阅专栏

在这里插入图片描述

导致视图不同步更新的原因是因为对象数据嵌套太深，导致vue监听不到数据变化，render函数不会自动更新
解决方案一：
使用this.$set()方法重置属性

语法：this.$set(object, key, value)
this.$set(this.labels[index], 'select', !this.labels[index].select)

如果还搞不定它就用下面的方法
解决方案二：
数据修改后调用this.$forceUpdate()强制更新视图

this.labels[index].select = !this.labels[index].select
this.$forceUpdate()

如果对你有帮助，点个赞再走吧~谢谢
关注我，不定时分享技术干货~

z.week
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
记录一次vue数据不同步的排查
haishangfeie的博客
01-19 1121
今天我遇到了一个vue异步获取数据后视图没有更新的问题，排查了很久很久，最后才发现自己踩在了一个自己万万没有想到的坑上，所以记录一下。 常见的解决方案 关于vue数据不同步的排查已经有很多类似的博客了，一般而言，原因有一下几点： 数据没有设置成功 设置的数据不是响应式的 设置的数据和视图上的变量不是同一个，可能设置错了变量 既然写到类似话题，我也罗列一下相关的解决方案： 使用this.$se...
vue 中 data 发⽣变化,视图不更新如何解决?
m0_69974492的博客
04-26 3933
vue 中 data 发⽣变化,视图不更新如何解决?一、data 发⽣变化,视图不更新的原因二、解决视图不更新的方法三、1.数组更新检测2.注意 一、data 发⽣变化,视图不更新的原因 在 vue2 中 vue 实例的 data 数据是响应式 的(就是数据变了 视图也会跟着变)，⽽我们新增的属性并不是响应式的，由于受现在JS的限制，Vue⽆法检测到属性的新增或删除。所以有时⽆法实时的更新到视图上。 二、解决视图不更新的方法 在项⽬中遇到这类问题的时候⼀般是通过 this. 方法去解决 $set⽅法⼀共
vue的table数据更新，但是视图不更新
最新发布
sun2829191346的博客
06-18 327
vue的table数据更新,但是视图不更新的解决方案
vue数据更新但视图（DOM）不刷新解决办法
weixin_49315886的博客
04-10 9819
对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论 在下知道的定会帮你回答希望能够帮到你 (#^.^#)第二种：vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值)第三种： vue.$forceUpdate()第一种：强制更新dom； vue数据更新但视图不刷新解决办法
（详解错误情况，及解决方法）Vue 数据更新了但页面没有更新的情况
m0_55333789的博客
08-09 1万+
（详解错误情况，及解决方法）Vue 数据更新了但页面没有更新的情况
Vue修改数组、对象并且触发视图更新的方法以及原理
五花漏的博客
03-20 9721
给 对象数组dataArr 添加 isMax 属性，修改title属性 data() { return { dataArr : [{ 'width' : 267, 'height' : 300, 'margin' : 20, 'isShow': true, ...
Vue中对象或数组数据更新但视图不刷新问题的解决策略
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-13 7839
在vue中，数据的绑定都不用我们操心，例如在data中有一个 msg 的变量，你修改它，那么在页面上，msg 的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的 length 变成0，vue就无法知道发生了改变。
数据更新了，但视图并没有更新
weixin_48123820的博客
05-14 3474
👉我们在开发过程中会碰到数据更新，但是视图并未改变的情况，原因基本vue没有检测到，
解决vue中修改了数据但视图无法更新的情况
10-18
在Vue.js中，数据绑定是基于数据响应式的，这意味着当你修改数据时，视图通常会自动更新以反映这些变化。然而，在某些情况下，当你直接修改数组元素或对象属性时，Vue可能无法检测到这些变动，导致视图不会更新。...
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
10-15
虽然在某些情况下，将更新图表的逻辑放在`updated()`中可能有效，但这并不是一种可靠的解决方案，因为Vue的更新过程可能与ECharts的渲染机制不同步。 - 一个更稳定的方法是利用Vue的`watch`功能。你可以创建一个`...
vue data变量相互赋值后被实时同步的解决步骤
10-14
在Vue.js中，data对象是用来存储组件状态的，它的属性会自动响应化，即当一个属性的值发生变化时，Vue会自动更新与之相关的视图。然而，当两个data属性直接互相赋值时，可能会遇到实时同步的问题，即改变一个属性的...
实现vuex与组件data之间的数据同步更新方式
10-16
在Vue组件中，`data`属性内的数据和视图之间保持着双向绑定，当`data`中的数据改变时，视图会自动更新。然而，当尝试将Vuex store的状态（`state`）绑定到组件的`data`上时，情况就变得复杂了。默认情况下，当`state...
Vue对象赋值视图不更新问题及解决方法
10-16
在Vue.js框架中，数据驱动视图是其核心...通过上述方法，我们可以确保即使在对象层级变更时，Vue也能正确地检测到变化并更新视图，保持数据与视图的同步。在开发过程中，理解并掌握这些技巧对于避免此类问题至关重要。
Vue 修改data中的数组和对象，DOM却不刷新
热门推荐
a303944689的博客
08-03 1万+
问题如题。看了官方文档。 给出了这样的解释。 由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 举个例子： var vm = new Vue({ data: { item...
vue el-date-picker 日期选择 回显后成功后无法改变的解决办法
coldriversnow的专栏
11-16 4638
写前端日期选择的时候遇到一个很奇怪的问题，回显赋值后再次修改无法更新数据。回显时 //用这个方法赋值。
VUE中数组更新后，页面没有动态刷新问题
u010227042的博客
06-15 1万+
最近使用vue开发时，在一个函数中使用for循环，改变了页面中的数组，在函数中查看是修改成功的，但是页面中没有动态刷新。 在Vue的官方文档有提到这样一个注意事项： 数组变更检测注意事项： 由于 JavaScript 的限制，Vue不能检测以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 举个例子： var vm = new Vue.
【vue】vue更新数据,页面数据不同步解决办法之一
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
12-13 1704
vue更新数据,页面数据不同步，解决办法之一
关于Vue页面数据不同步更新问题
RicciLiu的博客
04-07 4916
关于Vue页面数据不同步更新问题 【摘要】 在我们平时开发中，很容易出现的就是，使用对象时，数据已经更新，但视图未同步更新，由于有时遇上数据量比较大，数据未完成加载，页面已经刷新了，导致我们看到数据刷新了，页面却未加载出来。关于如何解决这个问题，有如下方法。 一、Vue 不能检测数组和对象的变化 1.1数组渲染场景： 解决方法： Vue官方文档指定的$set方法： 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 pr
vue中data发⽣变化,视图不更新如何解决?
weixin_72502274的博客
12-01 125
前端面试必会
vue数据改变后而视图不更新有哪几种情况及解决方式？
05-16
Vue数据改变后视图不更新的情况有以下几种： 1. 直接修改数组某个下标的值，Vue无法监测到该变化，因为Vue会在初始化时劫持数组的一些方法来监听数组变化，如push、pop、shift、unshift、splice、sort、reverse等，而直接修改数组的某个下标的值并不是这些方法，所以Vue无法感知到变化。 解决方式：使用Vue提供的变异方法来修改数组，如$set、splice等。 2. 对象属性添加或删除时，Vue也无法检测到变化，因为Vue只劫持了对象已有的属性。 解决方式：使用Vue提供的$set方法来添加属性，使用Vue提供的$delete方法来删除属性。 3. 多个组件共享同一个数据源，如果一个组件修改了数据，但是其他组件没有更新，这是由于Vue的组件实例是独立的，它们都有自己的状态，修改一个组件的状态并不会影响其他组件的状态。 解决方式：使用Vuex来进行全局状态管理，或者使用事件总线来进行组件之间的通信。 4. 在生命周期钩子函数中直接修改数据，由于Vue的异步更新机制，在生命周期钩子函数中修改数据可能会导致视图无法及时更新。 解决方式：在生命周期钩子函数中使用this.$nextTick方法，该方法会在DOM更新完毕后执行回调函数，确保视图已经更新后再进行数据的修改。 5. 在计算属性中修改数据，计算属性本质上是一个函数，当计算属性依赖的数据发生变化时，该函数会重新执行，如果在计算属性中修改数据，则会导致死循环。 解决方式：避免在计算属性中修改数据，如果必须要修改，可以使用watch监听该计算属性，然后在watch回调函数中进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

z.week

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值