解决Vue中对象属性改变，视图不更新问题

最新推荐文章于 2023-09-24 22:54:17 发布
最新推荐文章于 2023-09-24 22:54:17 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y521123y/article/details/104747787
版权

Vue项目中，正常情况下，当data中的数据发生改变时，视图也会随着更新。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，在Vue官网中也提到，Vue 无法探测普通的新增属性
比如 this.myObject.newProperty = 'hi'
如何解决这个问题呢？

有两种解决方案：
方案一：利用this.$set(this.obj,key,val)

this.$set(this.taskDetail,'code',result.order.code)

方案二：利用Vue.set(object,key,val)

Vue.set(this.taskDetail,'code',result.order.code)
爱吃的前端程序员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue中对象属性改变视图不更新的问题
11-27
常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？ 实例代码如下： let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案： 方案一：利用Vue.set(object,key,val) 例：Vue.set(vm.obj,’k1′,’v1′) 方案二：利用this.$set(this.obj,key,val) 例：this.$set(this.obj,’k1′,’v1′) 方案三：利用Object.a
详解Vue改变数组中对象的属性不重新渲染View的解决方案
01-19
在解决问题之前，我们先来了解下 vue响应性原理： Vue最显著的一个功能是响应系统– 模型只是一个普通对象，修改对象则会更新视图。 受到javascript的限制，Vue不能检测到对象属性的添加或删除，因为vue在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它。 但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上：如下代码: Vue.set(obj, '_isHover', true); 或者可以使用vm.$set的实列方法，也是Vue.set方法的别名： this.$set(o
vue数据更新UI不刷新显示的解决办法
11-19
vue比较常见的坑就是数据（后台返回）更新了，但是UI界面并没有更新，常见于以下情况： 一、数据为数组时 1.通过数组索引修改数组元素例如： 此时UI数据并不会刷新 2.修改数组长度时： 解决方案： 如果data为JSON数组则如下： 第一个参数为要更新数据的数组，第二个参数为要更新的数组中具体的元素下标，第三个参数为新数据 备注: 数组原型上的方法vue可直接检测到变化：push(),pop(),shift(),unshift(),splice(),sort() 二、数据为对象时: Vue 不能检测对象属性的添加或删除：你可以这样添加一个属性 如果要添加多个属性可以 补充知识：v
解决vue数组中对象属性变化页面不渲染问题
01-19
做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。 换了关键词搜索找到了相关方法。 其实之前读文档教程的时候看到过这里，但是只有真的使用之后才会有最直接的感触。 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下： push() pop() shift() unshift() splice() sort() reverse() 你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ message: ‘Baz’ }) 。
Vue3的新特性变化，上手指南！
学而不思则罔,思而不学则殆
02-25 2867
Vue3 新特征变化 API 上手指南
Vue3问题：为什么有时候数据变了，但是视图没有变？经常有人忽略！
最新发布
m0_74802419的博客
09-24 5077
reactive函数用于创建一个响应式的对象。 当使用reactive定义一个对象时，对象的属性会被转换为响应式的，即当属性的值发生变化时，相关的视图会进行更新。 但是，如果直接修改对象本身的引用，而不是其中的属性，视图不会更新。
vue3 - 使用reactive定义响应式数据进行列表赋值时，视图没有更新的解决方案
qq_43886365的博客
08-09 7938
上面的代码 `reactive([{name:'Eula'}]) `创建了一个响应式数组，返回一个Proxy包装的对象由`userInfo`变量进行存放，但是后面我又把一个普通的数组（也就是后端返回的数据）赋值给`userInfo`，注意这时`userInfo`这个变量存放的已经是一个普通的数组了，当然也就不具备响应式了；
vue3中数据修改了，视图未及时更新的解决办法
热门推荐
余香
07-01 1万+
错误做法 但是，使用****filter方法过滤数据重新赋值后，数据修改了，视图却没有更新，这和vue3的更新机制有关。例子说明： 正确做法 接下来，换个思路，换成splice方法，改变原数组。具体用法：Array.prototype.splice()此次的需求是删除其中一个元素，故基本语法如下： 所以需要找到该对象元素在数组的索引方法1：indexOf() 方法2：findIndex() 结语 问题完美地解决了~......
vue中对象属性改变视图不更新问题
高先生的猫
08-07 503
常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？ let vm = new Vue{ el:'#app', data: { obj: { k:'v' } },... } 有三种解决方案： 方案一： Vue.set(object,key,val) 例： Vue.set(vm.obj,'k1','v1') 方案二： this.$set(this.obj,key,val) ...
vue3中数据更新，视图没有更新解决方案
Yang_Ming_Lei的博客
03-25 4330
Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候，当我们对象再次赋值，我们发现数据已经修改成功，但是页⾯并没有自动渲染成最新的数据；
vue3中遇到的问题
大灰狼的小绵羊哥哥的博客
08-18 4662
分享 15 个比较常见的问题，基本都贴出对应文档地址，还请多看文档~ 因此主要分几个方面总结：
关于在vue中使用v-for对数组循环，再对数组中对象的某一个属性修改值，试图不更新
Benz_s600的博客
04-20 4139
举个栗子 <template> <div class="box-wrap"> <div class="box-item" v-for="(item,index) in list" @click="edit(index)"> {{item.name}} </div> </div> </template> <scr...
Vue3.0 ｜ vue3的新特性
qq_45939676的博客
11-07 893
Vue3.0 ｜ vue3的新特性
Vue 3 组件生命周期变化详解：不同阶段的影响和使用方法
weixin_43263566的博客
10-02 2960
Vue3 组件生命周期的变化
electron-vue+electron-updater实现自动更新
阿东的博客
10-29 3306
electron-vue全量更新，利用electron-updater库实现，文章包含electron-updater、vue交互源码
vue v-for循环改变循环数据视图不更新
qq_27437073的博客
07-11 1万+
在前端开发中如下图菜单框架（左侧菜单内容由顶部菜单点击后动态更新data内 menu:[] ）v-for循环menu显示左侧菜单 问题：点击顶部菜单后（menu[]重新赋值），左侧菜单不能更新为新的menu[]里的内容。 原因： 由于 JavaScript 的限制， Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = ...
vue 2中数组中的某个对象的属性发生变化，视图不更新如何解决?
Heiaoaoao的博客
09-19 1375
Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实施响应。this.$set()解决。方案二：就利用 Object.assign({}，this.obj)创建新对象。方案一：利用 this.set(this.obj,key,val)如果是对象就 Object.assign({}，this.obj)。如果是数组就 Object.assign([]，this.obj)例：this.set(this.obj,‘k1’,‘v1’)
vue 中事件改变数组属性值，视图没有更新问题
weixin_45514326的博客
06-05 1635
vue 中事件改变数组属性值，视图没有更新问题 原因 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 这些情况的修改数组 视图是不会发生更新的。 <template> <div> <br/&
解决vue对象中的数组的值发生改变不渲染
08-08
当Vue对象中的数组的值发生改变但没有触发视图的重新渲染时，可以考虑使用Vue的响应式属性来解决这个问题。 Vue中的响应式属性主要是依赖于Vue的Observer（观察者）来实现的。它会自动追踪对象的属性，并在属性发生...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值