vue 中$set的使用（数据赋值时，有时候并不会自动更新到视图上去怎么解决？）

最新推荐文章于 2024-08-30 14:23:41 发布
最新推荐文章于 2024-08-30 14:23:41 发布
阅读量1k 收藏
点赞数 1
分类专栏： vue使用过程中遇到问题 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39950595/article/details/103706794
版权

这个问题可能是很多新手会遇到的问题：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。

其实最主要的原因还是因为对vue文档不熟悉：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

当我们为对象修改一个或者添加一个属性时：
普通的修改虽然能改变该对象上的属性，但视图层却没有更新。
由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在data中，视图层才会响应该数据的变化。

所以可以使用

this.$set(obj, key, value)/vue.set(obj, key, value)来解决
 

dchhey
关注
专栏目录
解决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 $set 给数据赋值的实例
10-16
在实际开发中，经常会遇到需要在运行时动态添加属性到对象或数组的情况，如果不使用$set，Vue将无法追踪这些属性的变化，从而导致视图不更新。本文通过一个生动的例子演示了如何正确使用$set来解决这类问题，并指出...
vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题？ - echart...
weixin_39542514的博客
12-22 319
...图等等，但是这些代码比较难写，因此我们通常会用借助echarts，那你知道如何使用echarts吗？这篇文章就和大家讲讲echarts的使用方法，有一定的参考价值，感兴趣的朋友可以看看。以饼状图为例，介绍echarts的使用步骤...下面我就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。常规情况下我们在vue实例的data中设置响应数据。但当...
解决vue中this.$set()不更新页面问题
最新发布
zhangxueyou2223的博客
08-30 539
this.$set()方法有一种情况，就是当你要设置的key已经存在于这个对象或数组中的时候，它只会更改data并不会为该key添加响应检测，所以解决这个问题的办法就是在设置值之前先把这个属性删除掉，然后再进行this.$set。这样就解决this.$set()不生效的问题。
Vue直接赋值，不自动渲染到视图上了？浅谈Vue中的$set
Northseaman的博客
10-26 586
使用Vue进行开发的过程中，有时会遇到一种情况：当Vue实例生成后，再次给左值时，并不会自动更新到视图上去，灵异事件发生了！ 仔细翻阅Vue的官方文档，你将会发现 原来文档里面都已经写了，哎呀，果然还是得多读书。 当然，在具体的生产过程中，不可能一开始就知道了所有需要的键，那么我们还可以，动态对data进行键值的添加。如下，其中Vue.set，当然你也可以使用vm.$set，这是别名。 Vue.set(data,key, value) ;= >Vue.set(...
vue中对象属性改变视图不更新问题
vue
05-08 460
常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？ 实例代码如下： let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案： 方案一：利用Vue.set(object,key,val) 例：Vue.set(vm.obj,'k1','v1') ...
vue中this.$set的用法：解决视图数据不更新问题
Ivan的编程随笔
01-03 7540
我们在使用vue进行项目开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。 这是因为当vue中的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 如下代码，给person对象新增age属性： data () { return { person...
vue中$set的使用(结合在实际应用中遇到的坑)
08-27
它可以帮助我们解决数据不更新的问题，当我们使用 Vue 进行开发时，有时候数据并不能自动更新到视图上，这时候我们就需要使用 $set 来解决这个问题。 使用 $set 的原因 在 Vue 中，当我们给数据赋值时，有时候并不...
$set——vue中数据更新，视图不更新的情况探讨
weixin_38728902的博客
03-07 799
很早之前就知道this.$set可以解决vue中数据更新视图不更新的问题，但是对于什么情况下才会造成视图不更新一直很模糊，今天就来确认一下什么情况会造成视图不更新。 vue官网中对此的解释是： 需要注意的问题是，以下变动的数组中，vue是不能检测到的，也不会触发视图更新： 通过索引直接设置项，比如： app.books[2] = {...} 修改数组长度，比如：app.books.leng...
vue2.0中set添加属性后视图不能更新的解决办法
12-09
在Vue 2.0中，数据绑定是基于数据响应式的，这意味着当数据对象中的属性发生变化时，视图会自动更新以反映这些变化。然而，有时我们可能会遇到一个情况，即在尝试通过`Vue.$set`添加新属性后，视图并未如预期那样...
vue中对象属性改变视图不更新
01-15 225
问题描述：第一次选择验证通过，再重新选择必填项校验不通过 但是打印出来是有值的 解决方法：利用Object.assign({}，this.obj)创建新对象 转载于:https://www.cnblogs.com/bzdfn/p/10270569.html...
vue 修改对象的值视图没有发生改变_vue中对象属性改变视图不更新问题
weixin_30082413的博客
12-31 445
大家好，今天给大家分享的是vue中对象属性改变视图不更新问题，希望大家喜欢。我们先来看一段代码letvm=newVue{el:'#app',data:{obj:{k:'v'}},...}在上面的代码中有个obj的对象属性,我们可以看到上面的obj只有一个k属性，然而我们在做项目的过程中，比如我们 this.obj.name="wuwei"然后我们在模板中调用 {{obj}}大...
问题：vue2修改对象属性值，数据改变，但是页面视图不更新
qq_44792224的博客
11-22 5117
v-if不要绑定数组元素，无效，数组元素内容的变化无法响应v-if绑定对象属性 {1: true, 2: false}，如果提前写死，v-if绑定其中一个属性，则可以生效v-if如果对象的属性数量不定，是通过某方法的触发去改变对象的属性数量。需要使用$set()//增改都适用this.$set(this.对象名， 属性名， 新值)//不可以使用下面的方法更新this.对象.属性 = 新值//或者this.对象[属性] = 值只要所有修改或者增加属性的语句都使用，就能解决v-if。
解决Vue中$set数据改变而视图不改变
qq_38886284的博客
04-17 399
vue视图中数据的渲染和更新些情况下双向绑定是失效的，此时我们会使用set去使视图得到更新，但是有时set会失。上面的代码姓名和年龄都可以正常渲染， 但是性别无法更新到视图上。
Vue对象赋值视图不更新问题及解决方法
10-16
在Vue.js框架中，数据驱动视图是其核心特性之一，这意味着当数据发生变化时，视图会自动更新以反映这些变化。然而，在某些情况下，直接对Vue对象中的数据进行赋值可能不会触发视图的更新，导致双向绑定失效。本文将...
vue 中数组中的某个对象的属性发生变化，视图不更新如何解决?
QLF19的博客
07-25 2108
第一种是数组的值改变，在改变数组的值的时候使用索引值去更改某一项，这样视图不会实时更新，这种情况是因为直接通过索引去改变数组，vue对象监听不到他的变化，所以没有更新；使用vue的变异方法pop(),push(),shift(),unshift(),revese(),sort(),splice()等方法也会触发视图更新。1.利用vue.set(object,key,val)：例：vue.set(vm.obj,'k1','v1');2.利用Object.assign({},this.obj)创建新对象；
vue中this.$set的用法（解决vue视图不及时更新问题）
weixin_44672169的博客
04-15 3405
应用背景： 项目中有给表格数据新加了一个edit字段来控制每行数据的编辑功能，html如图： 通过点击管理按钮，改变edit的布尔值来切换视图，js如下： 然后发现点击按钮视图根本没有切换，然后在控制台打印出来的edit是正确的也并无异常，此时就需要用到this.$set来解决，js如下： this.$set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值