Vue中使用this.$set更新页面数据

最新推荐文章于 2024-04-30 18:15:11 发布
最新推荐文章于 2024-04-30 18:15:11 发布
阅读量2.6k 收藏 3
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43751465/article/details/107581100
版权

应用场景

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。
官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)，vue官网是vue.set的用法

实例

1.vue 中写在标签的代码

在这里插入图片描述
2.export default{}中data数据
在这里插入图片描述
3.点击按钮触发changeValue方法，

调用方法：this.$set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据（下标，或者元素名称）

value ：重新赋的值

最低0.47元/天 解锁文章
kookoo_babe
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【笔记】vue的set方法更新一个 新字段/新数组
hamal_ye的博客
01-07 3259
在vue实例里面，更新一个data对象里面没有初始化过的 新字段/新数组，如果只是类似对象赋值的写法，是不会被重新挂载到页面实例中的，此时就要用到vue的set方法 更新字段格式：Vue.set(target_position, newKey, newValue); 更新数组格式：Vue.set(target_position, index, newValue); 写个小例子在下方： v...
【vue】$set的用法
最新发布
2401_83036723的博客
04-30 1043
参数2：是数组的下标或者对象的属性名。参数1：是需要更新的数组或对象。$set用来更新数组或对象。参数3：是更新的内容。
Vue中 this.$set的用法
海带的博客
01-20 1174
Vue中this.$set的用法 Vue.set( target, propertyName/index, value ) 参数 {Object | Array} target {string | number} propertyName/index {any} value <template> <div class="page" id="app"> <button @click="add">设置</button> <ol>
this.$set给自己赋值不生效，需重新赋值一个变量【vue】
huangfuyk.的博客
02-18 2243
$set如下这样写是不行，还得重新赋值个变量(前提是已经拿到this.formData.actualQty的值，但是页面不显示)。 错误示范： this.formData.actualQty= Number(this.formData.actualEa * this.formData.minPackLevel) + Number(this.formData.actualParts); this.$set(this.formData, 'actualQty', this.formData.actualQty
vue 在子组件中更新父组件中传过来的变量——.sync 和 $emit(update:xxx)
青蛙king的博客
12-28 2185
vue .sync 修饰符与 $emit(update:xxx) 的使用 【参考资料】 Vue .sync修饰符与$emit(update:xxx) 一个报错
从vue源码解析Vue.set()和this.$set()
10-18
然而，在某些情况下，直接修改对象或数组的属性可能不会触发视图更新，这时就需要使用 `Vue.set()` 或 `this.$set()` API 来确保数据的变更能被正确地追踪和反映到视图中。 `Vue.set()` 和 `this.$set()` 都是用来...
Vue.set() this.$set()引发的视图更新思考及注意事项
12-09
this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。 set方法调用时，可以触发页面全部重新渲染。 比如在vue中有个data数组arr： //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set...
从vue源码解析Vue.set()和this.$set().docx
01-22
this.$set()的实现原理与 Vue.set()非常相似，唯一的区别是 this.$set()只能在 Vue 实例中使用，而 Vue.set()可以在任何地方使用。 this.$set()的源码位于 Vue 实例的 prototype 中： `Vue.prototype.$set = ...
使用Vue.set()方法实现响应式修改数组数据步骤
10-16
在Vue.js框架中，响应式系统是其核心特性之一，它允许开发者轻松地实现数据绑定，使得当数据发生变化...在实际开发中，当遇到因为直接修改数组而导致视图未更新的问题时，可以考虑使用`Vue.set()`来确保数据的响应性。
Vue2.X 通过AJAX动态更新数据
10-18
例如，如果你的数据是数组，可以使用`Vue.set`或`this.$set`方法，或者使用`v-for`指令直接更新数组。对于对象，直接赋值可能会导致Vue无法检测到变化，此时可以使用`Object.assign`或解构赋值来创建新的对象引用。 ...
Vue 给对象添加新的属性 → this.$set() —— 前端踩坑7
qq_34548699的博客
05-01 955
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 1. event.children = children; // 为vue变量添加属性，这句代码比上句更robust！ 2. this.$set(event,'children',children); ...
Vue中的$set的使用
where_slr的博客
10-08 2412
Vue —$set 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性 data () { return { student: { ...
Vue中的set()方法
kshon的博客
11-11 1万+
大家在写vue前后端交互时不知道有没有碰到过一个问题，就是在data里面定义一个变量，然后从后台获取数据后赋值给这个变量，但是对这个变量里的对象的属性或者数组的元素进行修改时，发现数据能修改，但视图不更新！ 原因：vue管理的变量必须生成了get和set方法，如data中定义的变量，虽然直接通过赋值的对象有get、set方法，但是对象里面的属性或者元素并没有get和set方法，所以vue不会根据...
Vue第6篇，Vue中的this.$set()使用教学，详细过程（vue项目中this.$set()的妙用）
热门推荐
weixin_65793170的博客
11-15 4万+
this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。
2022-06-17 工作记录--Vue-用$set赋值
weixin_48850734的博客
06-22 3189
Vue-用$set赋值
Vue 更新数据 Vue.set 的属性和方法
xiaowude_boke的博客
03-16 2227
通过 Vue.set 方法添加的属性，Vue 是可以识别到的 它也会自动渲染到页面中 在控制台输入 vm.info 查看时可以发现 新增的属性没有 get 和 set 方法，所以 Vue 监听不到 age 的变化，也就不会自动渲染到页面中了。
vue中this.$set()的用法----更新数组和对象的值
m0_67391521的博客
03-06 2万+
我们先看看官网给出的解释： 1、更新数组: 我们有一个数组，包括人员姓名和人员年龄两个属性。 想要实现在页面刚加载的时候改变姓名为李四的人的信息。 首先我们想到的是在mouted函数中直接修改name为李四的人的信息 this.itemList[1] = { name: '李思思', age: 30 } console.log(this.itemList[1]); 但是这时候控制台打印的数据更新了，但是页面视图却没有更新。这时候我们就需要用到this.$set
vue2的this.$set
09-01
引用解释了在Vue.js 2中，使用`this.$set(target, key, value)`可以向响应式对象中添加新的属性。`target`是需要添加属性的对象，`key`是要添加的属性名，`value`是属性`key`对应的值。这可以确保新添加的属性也能被响应系统观察到并反应到页面中。 引用提到了在Vue.js 2中，如果直接给响应式对象新增属性，这些新增的属性并不会在页面上显示。同样地，对于响应式数组，增加元素或修改数组长度也不会反映在页面上。 引用指出这个问题主要是由于Vue.js 2使用的是`Object.defineProperty`方法来实现响应式数据，而这个方法有一些缺陷。相比之下，Vue.js 3采用了`Proxy`和`Reflect`来处理响应式数据，所以在Vue.js 3中不会出现这个问题。 综上所述，Vue.js 2中的`this.$set`方法可以用于向响应式对象添加新的属性。这样可以确保新增的属性能够被响应系统监听并在页面上展示出来。但需要注意的是，Vue.js 3中已经使用了更先进的方法来处理响应式数据，因此不再需要使用`this.$set`方法来解决这个问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue2中this.$set()详解](https://blog.csdn.net/weixin_56650035/article/details/118499385)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue2 this.$set()的使用](https://blog.csdn.net/weixin_52941842/article/details/126342703)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值