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

最新推荐文章于 2024-05-16 13:45:21 发布
最新推荐文章于 2024-05-16 13:45:21 发布
阅读量3.7k 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunlizhen/article/details/106383339
版权

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添加，否则改变时不能渲染视图；

sunlizhen
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue修改数据页面不更新的问题解决
weixin_49757430的博客
04-29 1019
Vue修改数据页面不更新的问题解决 解决方法1:Vue.$set(官方推荐) Vue.set( target, propertyName/index, value ) 参数： target：要修改的对象或数组 propertyName/index：属性或下标 value：修改后的value值 官方对这个API的解释就是使用这个api修改的数据会为其添加响应式getter和setter让其拥有数据响应的特性 this.$set(th...
初学Vue遇到的计算属性不刷新的问题
u012745755的博客
08-05 1万+
项目场景： Vuex中定义了一个列表，在组件中想要读取列表数据进行展示，其中选择按钮的是否选中取决去对象中的check属性 问题描述： 组件内动态绑定class，采用了计算属性去返回true或者flase，添加点击事件，当点击div时对Vuex中对应的布尔值取反。但实际运行只有第一次加载页面时能正常显示，之后无法正常切换，在点击事件中打印CartList[index].check却能正常切换true，flase 后来将计算属性依赖于data时点击可以正常切换，通过搜索了解到计算属性是依赖于da...
vue 中$set的使用（数据赋值时，有时候并不会自动更新到视图上去怎么解决？）
weixin_39950595的博客
12-25 1002
这个问题可能是很多新手会遇到的问题：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。 其实最主要的原因还是因为对vue文档不熟悉：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 当我们为对象修改一个或者添加一个属性时： 普通的修改虽然能改变该对象上的属性，但视图层却没有更新。 由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为...
$set——vue中数据更新，视图不更新的情况探讨
weixin_38728902的博客
03-07 770
很早之前就知道this.$set可以解决vue中数据更新视图不更新的问题，但是对于什么情况下才会造成视图不更新一直很模糊，今天就来确认一下什么情况会造成视图不更新。 vue官网中对此的解释是： 需要注意的问题是，以下变动的数组中，vue是不能检测到的，也不会触发视图更新： 通过索引直接设置项，比如： app.books[2] = {...} 修改数组长度，比如：app.books.leng...
vue数据更新但视图（DOM）不刷新解决办法_vue改变了data,dom没改变
最新发布
2401_84616292的博客
05-16 552
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
Vue 解决数据更新视图不更新问题$set()方法
南城旧梦_de博客
05-10 2895
vue set()
vue中this.$set()-数据更新，视图没有更新、element计数器加减失效的问题
黄哈哈的博客
11-22 1029
当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，concat等修改数组，同时也将触发状态更新。当利用索引直接设置数组的某一项时，例如：vm.items[indexOfItem] = newValue。控制台打印的数据更新了，但是页面视图却没有更新。当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。target：要更改的数据源(可以是对象或者数组)value ：重新赋的值。
使用$set()数据更新但视图不更新问题
F-two的博客
05-08 1836
用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 410
现象描述 1：存在两个下拉框订单平台与订单店铺，二者联动，具体如下： 2：数组因各种原故存储在变量中 3：二者皆由接口动态获取数据： // 获取平台更新 watch: { source (newVal, oldVal) { if (newVal != oldVal) { this.formData.shopId = '' this.getShopList(newVal) } } }, computed: {
vue2.0中set添加属性后视图不能更新的解决办法
12-09
在Vue 2.0中，数据绑定是基于数据响应式的，这意味着当数据对象中的属性发生变化时，视图会自动更新以反映这些变化。然而，有时我们可能会遇到一个情况，即在尝试通过`Vue.$set`添加新属性后，视图并未如预期那样...
Vue2.0 $set()的正确使用详解
10-15
Vue2.0中的`$set()`方法是用来解决Vue无法检测对象动态添加属性并触发视图更新的问题。在ES5环境中，Vue在初始化实例时，会将`data`对象中的属性转化为getter和setter，以实现数据的响应式。但是，如果在实例创建后...
Vue数据更新，页面却没有更新的几种情况及解决方法
LFQP_的博客
03-27 2万+
Vue数据更新，页面却没有更新的几种情况及解决方法
vue中this.$set的用法（解决vue视图不及时更新问题）
weixin_44672169的博客
04-15 3313
应用背景： 项目中有给表格数据新加了一个edit字段来控制每行数据的编辑功能，html如图： 通过点击管理按钮，改变edit的布尔值来切换视图，js如下： 然后发现点击按钮视图根本没有切换，然后在控制台打印出来的edit是正确的也并无异常，此时就需要用到this.$set来解决，js如下： this.$set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就
Vue2.0 $set()的正确使用方式
Pany的博客
08-04 14万+
vue2.0 给data对象新增属性，并触发视图更新
vue $set()方法 没有更新视图 修改已有属性视图没有即时更新
gold_dai的博客
01-08 1183
首先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方法删除 再用
this.$set的正确使用 vue更改对象属性视图不更新
weixin_45642483的博客
02-19 549
原文链接 this.#set(obj, key, value) 我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性 <template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> &lt
【 vue2中数据改变，视图不变】
YcintaL0203的博客
09-21 1968
在vue 2 中 出现 数据改变，视图不变的时候可以 1.this.$set来解决有三个参数（ 目标对象/数组，属性/下标，强制修改的值）2.JSON.parse(JSON.stringify()) 来解决。
vue数据不更新的原因(vue中数据更改了，但是视图没有更新)
热门推荐
web前端学习总结
09-21 15万+
vue数据不更新的原因(vue中数据更改了，但是视图没有更新) 参考链接 templete: &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h2&amp;gt;{{dataObj.text}}&amp;lt;/h2&amp;gt; &amp;lt;/div&amp;gt; js: new Vue({ el: '#app',
vue中this.$set修改对象属性不更新问题
liona_koukou的博客
03-28 5500
小问号，你是否有很多的朋友？ 当我this.$set修改对象属性竟然没有引发更新的时候我是崩溃的，我甚至开始怀疑起这个代码、这个编辑器甚至这个浏览器在针对我_(:з」∠)_ 最终原因是初始对象中没有这个属性时，我直接用 obj.attr= []; 新增了一个attr属性，导致在 this.$set(this.obj, 'attr', '[1,2,3]'); 时没有引发更新 其实新...
vue2.0 在数组中添加对象视图不更新
02-11
Vue 2.0 中如果向数组中添加对象，但视图不更新，这是因为 Vue 数据绑定的原理是基于数组的变异方法（即：push、pop、shift、unshift、splice、sort、reverse）进行监测的。如果直接修改数组，Vue 就无法检测到更改并触发视图更新。 解决方法：使用变异方法或Vue.set()进行数组的更新操作。例如： ``` this.items.push({ message: 'new item' }) ``` 或者： ``` Vue.set(this.items, this.items.length, { message: 'new item' }) ``` 这样，就能保证视图的正确更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值