vue数据更新视图不刷新解决办法 vue中this.$set 的用法

已于 2023-11-06 09:12:54 修改
阅读量1.2k 收藏
点赞数 1
文章标签： vue.js
于 2023-05-08 10:12:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61672533/article/details/130553131
版权

解决方法1：this.$set()

this.$set(要操作的对象或数组, 要新增或者修改的数组或对象key, 对应的值)

解决方法2：强制刷新页面

this.$forceUpdate（）

解决方法3:Object.assign(使用修改栈能触发视图更新的特性)

Object.assign能拷贝合成一个新对象,所以我们只需要将要修改的值合并成一个新对象然后赋值给data中的对象或数组,这样栈的指向被修改了,触发视图更新

不要失眠啊！
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue数组数据变化了，赋值后视图没更新的问题
qq_37635012的博客
03-20 4275
最近遇到一个问题，表格数据变化了，直接赋值后视图没更新，打印表格数据发现是最新的数据，这主要是因为，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。最开始我是直接将后端返给我的数组res.result.listpg进行赋值，没显示出来，然后我用map处理了一下。通过map数组方法，对数组里面的每条数据进行重新处理，将返回的新的数组重新赋值给当前的数组。
vue2.0中set添加属性后视图不能更新的解决办法
12-09
今天在工作中遇到一个问题，郁闷了很久，特地写一篇博客记录一下，方便以后再遇到可以查找，也分享个各位小伙伴，在网上查找很多资料说用Vue.$set设置属性后视图也会更新，但是真相并不是这样，通过等于号赋值和$set...
关于vue2强制刷新,解决页面不会重新渲染的问题
10-16
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中使用G2图表的示例代码
10-17
主要介绍了在vue中使用G2图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue｜数据更新，视图未更新的几种解决方案
最新发布
JackChan
04-07 463
Vue｜数据更新，视图未更新的几种解决方案
VUE实现强制渲染,强制更新
10-16
今天小编就为大家分享一篇VUE实现强制渲染,强制更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
10-18
主要介绍了解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等），解决方法是使用this.$forceUpdate()强制刷新，文章给大家分享了代码案例，需要的朋友参考下吧
vue使用echarts是，动态获取数据，动态更新图表数据。
weixin_46371752的博客
03-07 1万+
vue使用echarts实现数据可视化，动态更新echarts上的数据，动态更新图表数据，vue和echarts结合，动态获取数据。
vue开发中，数据更新，但视图不刷新
热门推荐
Quentin0823的博客
07-07 2万+
我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到；第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到；**解决方法1：静默刷新(使用v-if的特性) 在修改值之后将元素销毁,然后在修改后的下一次DOM渲染完成时再显示出来,这样就会触发组件重新加载data的数据进行渲染,data中被修改的数据才是最新的。 解决方法2:Vue.$set(官方推荐) 使用这个api修改的数据会为其添加响应式gett
Vue数据更新视图不更新的几种解决方案
weixin_42504805的博客
07-19 9134
Vue数据更新视图不更新的几种解决方案
Vue中对象或数组数据更新但视图不刷新问题的解决策略
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-13 5336
在vue中，数据的绑定都不用我们操心，例如在data中有一个 msg 的变量，你修改它，那么在页面上，msg 的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的 length 变成0，vue就无法知道发生了改变。
Vue.set() this.$set()引发的视图更新思考及注意事项
10-18
this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。这篇文章主要介绍了Vue.set() this.$set()引发的视图更新思考及注意事项,需要的朋友可以参考下
vue中 this.$set的用法详解
12-29
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 <p v-for=item key=item.id>{{item.message}} <button class=...
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
　在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到...
Vue封装Echarts子组件 动态更新图表展示（）
weixin_43105912的博客
08-26 437
vue子组件传参
vue 实现echarts图表重新刷新
danger_man的博客
10-22 7688
需求：点击全屏按钮，页面布满全屏，但echarts图表的size还是全屏前的小size，现需要在用户点击全屏按钮后，重绘echarts的size 代码： html: <div id="c2" style="width: 100%; height: 100%"></div> js: mounted() { window.onresize = () => { // 基于准备好的dom，初始化echarts实例 let myChart2 = echarts
this.$set()用法 强制更新视图数据
qq_52099965的博客
11-22 1379
this.$set()用法 强制更新视图数据
vue +echarts 地图 强制更新数据 this.$forceUpdate()
阿天的博客
06-11 548
vue 强制更新数据 this.$forceUpdate() 页面数据已经更改，样式试图未更新； echarts地图上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`方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值