Vue2.0 $set()处理数据更新但视图不更新的问题

最新推荐文章于 2025-06-17 14:52:18 发布
原创 最新推荐文章于 2025-06-17 14:52:18 发布 · 3.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

this.$set修改对象属性竟然没有引发视图得更新

最终原因是初始对象中没有这个属性时，我直接用

obj.num= index+1;
新增了一个attr属性，导致在

row.num--;
this.$set(this.tableData[index],'num', row.num )


时没有引发更新。

其实新增属性的时候就应该用

this.$set(item, 'num', index + 1)


来新增属性，这样才能建立起监听。

所以总结就是 想要用this.$set 改变后来添加得属性，添加得时候必须好用this.$set添加，否则改变时不能渲染视图；

Vue2.0 $set()的正确使用详解
10-15
Vue2.0中的`$set()`方法是用来解决Vue无法检测对象动态添加属性并触发视图更新的问题。在ES5环境中，Vue在初始化实例时，会将`data`对象中的属性转化为getter和setter，以实现数据的响应式。但是，如果在实例创建后...
vue2.0中set添加属性后视图不能更新的解决办法
12-09
在Vue 2.0中，数据绑定是基于数据响应式的，这意味着当数据对象中的属性发生变化时，视图会自动更新以反映这些变化。然而，有时我们可能会遇到一个情况，即在尝试通过`Vue.$set`添加新属性后，视图并未如预期那样...
$set——vue中数据更新，视图不更新的情况探讨
wudandong的博客
03-07 844
很早之前就知道this.$set可以解决vue中数据更新视图不更新的问题，但是对于什么情况下才会造成视图不更新一直很模糊，今天就来确认一下什么情况会造成视图不更新。 vue官网中对此的解释是： 需要注意的问题是，以下变动的数组中，vue是不能检测到的，也不会触发视图更新： 通过索引直接设置项，比如： app.books[2] = {...} 修改数组长度，比如：app.books.leng...
使用$set()数据更新但视图不更新问题
F-two的博客
05-08 2064
用uniapp做毕设时遇到个坑记录下，$set()处理数据更新但视图不更新的问题，以下原话借用[博客](https://blog.csdn.net/qq_41075132/article/details/103834537)：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。光用$set，我发现数据更新但视图仍然不更新，此时在操作数据后加个
vue数据更新视图不更新及$set无法获取最新数据
hyduan_h5的博客
05-24 499
现象描述 1：存在两个下拉框订单平台与订单店铺，二者联动，具体如下： 2：数组因各种原故存储在变量中 3：二者皆由接口动态获取数据： // 获取平台更新 watch: { source (newVal, oldVal) { if (newVal != oldVal) { this.formData.shopId = '' this.getShopList(newVal) } } }, computed: {
Vue 解决数据更新视图不更新问题$set()方法
南城旧梦_de博客
05-10 3053
vue set()
vue中this.$set修改对象属性不更新问题
liona_koukou的博客
03-28 5604
小问号，你是否有很多的朋友？ 当我this.$set修改对象属性竟然没有引发更新的时候我是崩溃的，我甚至开始怀疑起这个代码、这个编辑器甚至这个浏览器在针对我_(:з」∠)_ 最终原因是初始对象中没有这个属性时，我直接用 obj.attr= []; 新增了一个attr属性，导致在 this.$set(this.obj, 'attr', '[1,2,3]'); 时没有引发更新 其实新...
Vue2.0 $set()详解：添加属性与视图更新
Vue2.0中的`$set()`方法是用于处理在实例创建后动态添加或修改对象属性，以确保视图更新的重要工具。由于JavaScript的限制，Vue在初始化时不会追踪对象属性的直接赋值，尤其是当属性是添加到对象内部而不是作为初始...
vue动态给对象添加属性视图不更新，this.$set()的使用
A_Brave的博客
04-22 624
问题 项目中遇到点击只给当前项添加样式的功能，因为涉及到默认样式和默认值的问题，需要在点击的时候给data中的对象添加新的属性和值， 上图的按钮通过循环公用的一个view，通过判断当前项和赋值给this.planObj的属性值来进行样式的添加 结果发现点击之后this.planObj之后属性和值已经成功添加 但是视图没有进行刷新，样式不会改变 查找后发现vue只能监听到data中定义的属性更新数据，如果在方法里添加是监听不到的，可以使用this.$set()方法进行添加，它有三个参数：（添加的对象，要
this.$set的正确使用 vue更改对象属性视图不更新
weixin_45642483的博客
02-19 618
原文链接 this.#set(obj, key, value) 我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性 <template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> &lt
vue $set()方法 没有更新视图 修改已有属性视图没有即时更新
gold_dai的博客
01-08 1313
首先vue中不能检测到数组和对象的两种变化： 1 数组长度的变化 vm.arr.length = 4 2 数组通过索引值修改内容 vm.arr[1] = ‘aa’ 所以要用set方法去修改数组或者对象， 那么如果直接 set方法 去修改对象或者数组的某个已经存在的属性，视图肯定是不会更新的， 可 以 试 一 下 先 用 d e l e t e 方 法 删 除 再 用 s e t 添 加 。 我 是 用 这 个 解 决 的 t h i s . set改变属性值也不更新，可以试一下先用delete方法删除 再用
vue2.0 $set 不更新视图，修改数据视图不更新
编程之路
08-26 3334
已有属性用set改变属性值也不更新，可以试一下先用delete方法删除再用set添加。我是用这个解决的this.set改变属性值也不更新，可以试一下先用delete方法删除 再用set添加。我是用这个解决的 this.set改变属性值也不更新，可以试一下先用delete方法删除再用set添加。我是用这个解决的this.delete(this,‘selectedFlag’) this.$set(th...
vue中$set用法详细讲解
热门推荐
Oralinge
12-16 16万+
地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。
♥ vue中$set用法详细讲解
林太白
08-10 9112
♥ vue中$set用法详细讲解
深入探究 Vue $set 的应用场景与原理
前端开发探索之旅
03-12 1830
set是 Vue 响应式系统的重要补充，主要用于解决动态属性和数组索引的更新问题。在 Vue 3 中，其适用场景有所减少，但仍需掌握其原理以应对复杂数据结构。合理使用$set可确保视图及时更新，提升用户体验。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
vue中常用的api（$set,$delete,$nextTick..)
最新发布
qq_48763502的博客
06-17 2318
set是 Vue 实例的一个方法，用于向响应式对象添加一个新的 property，并确保这个新 property 同样是响应式的，且触发视图更新。$set是 Vue 2.x 中解决响应式限制的重要工具，合理使用可以确保数据变化的响应性。但在 Vue 3 中，由于响应式系统的改进，$set的使用场景大大减少。在开发中，应根据 Vue 版本和具体场景选择合适的数据操作方式。$nextTick$nextTick在数据变化后安全地操作DOM确保获取到最新的DOM状态与第三方库正确集成。
从vue源码看Vue.set()和this.$set()
diewan6825的博客
08-30 3001
前言 最近死磕了一段时间vue源码，想想觉得还是要输出点东西，我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。 Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对数组或者对象进行这样的骚操作操作，结果发现，咦~~，他喵的，怎么页面没有重新渲染。 const vueInstance = new Vue({ ...
问题：vue2修改对象属性值，数据改变，但是页面视图不更新
qq_44792224的博客
11-22 5826
v-if不要绑定数组元素，无效，数组元素内容的变化无法响应v-if绑定对象属性 {1: true, 2: false}，如果提前写死，v-if绑定其中一个属性，则可以生效v-if如果对象的属性数量不定，是通过某方法的触发去改变对象的属性数量。需要使用$set()//增改都适用this.$set(this.对象名， 属性名， 新值)//不可以使用下面的方法更新this.对象.属性 = 新值//或者this.对象[属性] = 值只要所有修改或者增加属性的语句都使用，就能解决v-if。
vue数据更新但不改变视图，解决办法？
smallmww的博客
08-07 5678
第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的； 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度；
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值