解决vue中this.$set()更新数据不更新视图问题

吱声前端攻城狮

于 2024-08-14 14:55:34 发布

阅读量23

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zwh2487577416/article/details/141191065

版权

一、问题：this.$set()更新数据不更新视图问题

使用this.$set()去解决vue中数组或者对象造成的响应式问题更新的时候，发现this.$set()也无法继进行动态的刷新。

二、原理：this.$set()方法有一种情况，就是当你要设置的key已经存在于这个对象或数组中的时候，它只会更改data并不会为该key添加响应检测，所以解决这个问题的办法就是在设置值之前先把这个属性删除掉，然后再进行this.$set

三、解决方法

this.$delete(row, 'attachment')，先把属性名字删掉再进行this.$set(row, 'attachment')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吱声前端攻城狮

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决vue中this.$set()更新数据不更新视图问题

使用this.$set()去解决vue中数组或者对象造成的响应式问题更新的时候，发现this.$set()也无法继进行动态的刷新。
复制链接

扫一扫

Vue第6篇，Vue中的this.$set()使用教学，详细过程（vue项目中this.$set()的妙用）

weixin_65793170的博客

11-15

4万+

this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。

vue中this.$set的用法（解决vue视图不及时更新问题）

weixin_44672169的博客

04-15

3327

应用背景：项目中有给表格数据新加了一个edit字段来控制每行数据的编辑功能，html如图：通过点击管理按钮，改变edit的布尔值来切换视图，js如下：然后发现点击按钮视图根本没有切换，然后在控制台打印出来的edit是正确的也并无异常，此时就需要用到this.$set来解决，js如下： this.$set实现什么功能，为什么要用它？当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就

参与评论您还未登录，请先登录后发表或查看评论

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

m0_61672533的博客

05-08

1380

vue数据更新视图不刷新解决办法

vue中this.$set()的用法----更新数组和对象的值

热门推荐

慎独的博客

10-21

3万+

我们先看看官网给出的解释： 1、更新数组: 我们有一个数组，包括人员姓名和人员年龄两个属性。想要实现在页面刚加载的时候改变姓名为李四的人的信息。首先我们想到的是在mouted函数中直接修改name为李四的人的信息 this.itemList[1] = { name: '李思思', age: 30 } console.log(this.itemList[1]); 但是这时候控制台打印的数据更新了，但是页面视图却没有更新。这时候我们就..

vue中this.$set的用法：解决视图数据不更新问题

Ivan的编程随笔

01-03

7480

我们在使用vue进行项目开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。这是因为当vue中的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。如下代码，给person对象新增age属性： data () { return { person...

vue中 this.$set的用法详解

10-16

在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法...

Vue 报错TypeError: this.$set is not a function 的解决方法

10-17

在Vue.js框架中，`this.$set`是一个用于添加响应式属性的方法，它遵循Vue的依赖追踪机制，确保新添加的属性能够触发视图更新。然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上...

Vue.set() this.$set()引发的视图更新思考及注意事项

10-18

Vue.js 是一个流行的前端JavaScript框架，它以数据驱动和组件化的思想为核心，使得开发者能够...遇到视图未更新的问题时，考虑是否需要使用`Vue.set()` 或 `this.$set()` 来强制更新视图，这通常是解决问题的有效途径。

Vue中this.$nextTick的作用及用法

11-21

在Vue中，当数据发生变化时，视图能够自动更新以反映这些变化。这一机制的实现涉及到多个关键概念，包括`this.$nextTick`，它在Vue的异步更新队列中扮演着重要角色。首先，Vue在初始化组件时，会对`data`对象中的...

vue的diff算法的【双端比较】策略

yiguoxiaohai的博客

08-08

346

vue的diff算法的双端比较策略

vue 实现上浮气泡效果

m0_68964998的博客

08-13

199

1.用 li 来做每个气泡。

【vue教程】五. Vue 的路由管理

最新发布

前端探索者

08-13

700

Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。

写一个Vue2和vue3的自定义指令（以复制指定作为示例）

weixin_44784401的博客

08-09

879

写一个Vue2和vue3的自定义指令（以复制指定作为示例）

Vue 中 app.config 相关配置项介绍与案例

前端基地

08-13

611

本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。

Element-plus中的el-input无法输入空格和Enter事件无法触发问题

qq_41068362的博客

08-13

126

在el-input外层包了一层el-tooltip导致space和enter失效

Vue设置滚动条自动保持到最底端

Lipn_的博客

08-09

564

实现滚动条始终保持在最底端

vue中怎么自定义组件

qinshi501的博客

08-09

1302

在开发过程中我们经常需要自定义组件完成特定的功能，比如用户详情页，我增加一个调整余额的按钮，点击以后需要打开一个调整余额对话框，输入调整的金额大小，完成以后关闭弹框同时刷新页面，要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件，包含一个调整按钮，点击按钮就打开这个对话框，里面利用watch监听用户的余额和用户id等信息，同时使用watch回调实时更新余额信息等。这里的refresh后的方法组件刷新的方法，可以在调整完余额后刷新用户最新余额信息。: number // 变动类型：1-用户金额。

Vue引入使用iconfont字体图标

m0_51431448的博客

08-08

152

由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。

vue前端通过权限控制显示数据列vue2 vue3

ci2011ss的专栏

08-08

209

【代码】vue前端通过权限控制显示数据列vue2 vue3。

vue使用this.$set更新视图为什么只能更新一次

05-24

`this.$set` 方法可以用于为 Vue 实例添加响应式属性。在 Vue 中，当一个对象被设置为响应式时，Vue 会通过 `Object.defineProperty()` 方法将其属性转化为 getter 和 setter，从而使得当属性发生变化时，能够自动触发视图更新。如果你使用 `this.$set` 方法更新了一个响应式属性，但是更新后并没有触发视图更新，可能是因为你没有在更新后进行 `this.$forceUpdate()`，或者你在更新后没有等待 Vue 的异步更新执行完毕。不过一般情况下，如果你正确地使用了 `this.$set` 方法，并且没有手动调用 `this.$forceUpdate()`，那么 Vue 应该能够自动触发视图更新，而不需要额外的操作。如果你遇到了更新视图不生效的问题，可以仔细检查一下代码，看看是否有其他问题存在。