vue动态给对象添加属性视图不更新，this.$set()的使用

最新推荐文章于 2022-06-04 18:35:54 发布
最新推荐文章于 2022-06-04 18:35:54 发布
阅读量529 收藏 1
点赞数 2
分类专栏： vue 文章标签： Vue 动态属性 样式切换 $set 响应式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_Brave/article/details/116021577
版权

问题

项目中遇到点击只给当前项添加样式的功能，因为涉及到默认样式和默认值的问题，需要在点击的时候给data中的对象添加新的属性和值，
在这里插入图片描述
上图的按钮通过循环公用的一个view，通过判断当前项和赋值给this.planObj的属性值来进行样式的添加
在这里插入图片描述
在这里插入图片描述
结果发现点击之后this.planObj之后属性和值已经成功添加 但是视图没有进行刷新，样式不会改变
查找后发现vue只能监听到data中定义的属性更新数据，如果在方法里添加是监听不到的，可以使用this.$set()方法进行添加，它有三个参数：（添加的对象，要添加的属性，要添加的属性值）

在这里插入图片描述
设置之后就能愉快的切换样式了
在这里插入图片描述

A_Brave
关注
专栏目录
vue中$set的使用（结合在实际应用中遇到的坑）
weixin_42667944的博客
07-27 4392
1、前言 在我们使用vue进行开发中，可能会碰到一种情况，当已经生成vue实例后，再次去给数据赋值或者添加数据，并不能同步更新到数据上面去。 在官方文档中发现这么一段话： 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 da...
vue中 this.$set的用法详解
10-16
总之，`this.$set`是Vue中一个非常实用的方法，尤其在处理动态添加属性或修改深层嵌套对象属性时，能够确保视图与数据的同步，避免出现预期之外的行为。在开发过程中，尤其是在处理非预定义的属性或数组元素时，合理...
this.$set的正确使用 vue更改对象属性视图不更新
weixin_45642483的博客
02-19 564
原文链接 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 为对象新增属性后不触发视图更新
noscallion的博客
10-15 398
对于vue的data里面已经声明的对象，当向其中添加新的属性时，vue不会触发视图更新。 对于这一问题。可以使用this.$set()来解决，详见我之前的文章。 但是有时这样仍然不能解决问题，我就碰到了这种情况。 我想到一种非常搞的方法，可以巧妙的解决这一问题。 //在data数组里再添加一个空对象，然后把它删掉 var temp = {} this.companyList.push(temp) var index = this.getIndex(this.companyList, {}) this.com
vue中this.$set修改对象属性不更新问题
liona_koukou的博客
03-28 5520
小问号，你是否有很多的朋友？ 当我this.$set修改对象属性竟然没有引发更新的时候我是崩溃的，我甚至开始怀疑起这个代码、这个编辑器甚至这个浏览器在针对我_(:з」∠)_ 最终原因是初始对象中没有这个属性时，我直接用 obj.attr= []; 新增了一个attr属性，导致在 this.$set(this.obj, 'attr', '[1,2,3]'); 时没有引发更新 其实新...
vue $set()方法 没有更新视图 修改已有属性视图没有即时更新
gold_dai的博客
01-08 1236
首先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方法删除 再用
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在Vue.js框架中，`this.$set`是一个用于添加响应式属性的方法，它遵循Vue的依赖追踪机制，确保新添加的属性能够触发视图更新。然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上...
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
总结来说，Vue.set()和this.$set()是用来解决Vue中对象属性动态添加时的响应性问题。在开发中，当需要确保数据变化能够反映到视图上时，应优先考虑使用这两个方法。了解它们的工作原理和正确使用方法，能够避免出现...
Vue.set() this.$set()引发的视图更新思考及注意事项
10-18
当在实例的`data`对象或者计算属性中动态添加属性时，Vue无法检测到这个变化，因此不会自动更新对应的视图。此时，`Vue.set()` 和 `this.$set()` 就派上了用场。 例如，如果我们有一个数组`arr`，尝试直接修改数组...
vue2.0 $set 不更新视图，修改数据视图不更新
编程之路
08-26 3274
已有属性用set改变属性值也不更新，可以试一下先用delete方法删除再用set添加。我是用这个解决的this.set改变属性值也不更新，可以试一下先用delete方法删除 再用set添加。我是用这个解决的 this.set改变属性值也不更新，可以试一下先用delete方法删除再用set添加。我是用这个解决的this.delete(this,‘selectedFlag’) this.$set(th...
vue 不能响应set结构增加数据_VUE数据不能set数据
weixin_42299494的博客
01-17 110
test.json和html在同一路径下，为甚不能设置初始数据？click{{gridData}}{{apiUrl}}var demo = new Vue({el: '#app',data: {gridData: "",apiUrl: 'test.json'},created: function() {this.getCustomers()},methods: {getCustomers: fun...
vue中数据改变但视图不改变的部分情况
weixin_52375544的博客
04-16 1007
一、vue中给列表数据添加属性，且视图可以改变 data.forEach(item=>{ item.属性名 = 属性值 }) 上述方法也可以设置，视图也可以渲染成功，但是无法进行双向绑定,所以建议使用以下方法实现： data.forEach(item=>{ this.$set(item,'属性名' ,'属性值') }) 二、vue ui框架中 表格渲染时 input框v-model绑定某一属性时无法修改 例：ant design 中表格插槽渲染 （不清楚的看：https://www
Vue2.0 $set()处理数据更新但视图不更新的问题
sunlizhen的专栏
05-27 3741
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 改变后来添加
vue 数组长度_VUE业务中数据绑定无效-this.$set来帮忙
weixin_39637260的博客
12-12 323
这个方法之前看文档肯定是看到了，但是从来没有遇到问题，就抛之脑后了！这不遇到问题了还得请它来帮忙！车祸现场效果代码问题剖析当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$se来帮忙了！官方解释：对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property，。但是，可以使用 Vue.set(object, propertyN...
vue2 $set 方法 与 = 号 为对象添加新值不起作用得原因
callBack_____的博客
06-04 1019
是否有很多小伙伴在在学习vue2得时候会遇到 data里新建了一个对象 obj ，而且需要动态得向obj里添加新的值，然而当你才思泉涌 想要直接用 this.obj.[新的属性] = [新的属性值] 的时候 你会发现一切都是徒劳，页面并没有变化，那么这究竟是为什么那？那么接下来 小call 就带你深度了解一下vue 双向绑定的原理。在了解双向绑定的原理与$set 方法之前，我们要先来了解一个方法相信有很多学习前端的小伙伴在学习js的时候 见过或者学习过这个方法。那么他是用来干什么的那？话不多说直接上代码最后
$set——vue中数据更新，视图不更新的情况探讨
weixin_38728902的博客
03-07 789
很早之前就知道this.$set可以解决vue中数据更新视图不更新的问题，但是对于什么情况下才会造成视图不更新一直很模糊，今天就来确认一下什么情况会造成视图不更新。 vue官网中对此的解释是： 需要注意的问题是，以下变动的数组中，vue是不能检测到的，也不会触发视图更新： 通过索引直接设置项，比如： app.books[2] = {...} 修改数组长度，比如：app.books.leng...
vue 对对象的属性进行修改时，不能渲染页面 vue.$set()
weixin_33705053的博客
01-18 732
2019独角兽企业重金招聘Python工程师标准>>> ...
VUE中this.$set()
hannah2233的博客
03-17 1158
一、 套入例子进行分析 1-1 如下所示，双层遍历 得到展示列表 1-2 “排行榜template代码” <el-row class="wrapper" :gutter="20"> <el-col :span="6" v-for="item in top_list" :key="item.id" class="toplist_item"> <div class="coverImg"> <
vue 数据改变视图没更新 $set解决
weixin_45486084的博客
08-03 1765
item.children = []; //赋值新属性会导致 新数据没劫持 this.$set(item, 'children', []) //解决方法 this.$set(你要改变的数组/对象, 你要改变的名字/index, 改变的value)
vue如何使用this.$set更新视图
最新发布
08-19
在Vue中使用`this.$set`可以动态地将一个新的属性添加到Vue实例中，这个新属性会触发视图的重新渲染。 使用方法如下： ```javascript // 在Vue实例中添加一个名为example的属性 this.$set(this, 'example', 'newValue') ``` 其中，第一个参数是要添加属性的对象，第二个参数是新属性的属性名，第三个参数是新属性的属性值。 如果你要更新一个已经存在的属性的值，可以直接使用以下语句： ```javascript // 直接更新已有属性的值 this.example = 'new value' ``` 这种方法也可以更新视图，但是只适用于已存在的属性，如果要添加新属性并且更新视图，必须使用`this.$set`方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值