this.$set或Vue.set

最新推荐文章于 2023-09-27 17:42:45 发布
最新推荐文章于 2023-09-27 17:42:45 发布
阅读量275 收藏
点赞数
分类专栏： # vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lou_Lan/article/details/100511519
版权

我在做iview  tree的render的时候，发现很多时候对象数组属性明明已经发生变化了，但是在tree上依旧时没有体现出来任何的变化，后来查看资料才在vue文档中列表渲染的注意事项中看到，这是js的限制。

由上面我们就可以看出来，绑定数据之后，我们可以通过this.$set修改数据属性，达到渲染视图的效果。这里this.$set由两种，一种就是这个this.$set，还由一种就是Vue.set。

this.$set有两种写法，一种是

this.$set(arr,  index,  val)

arr: 表示数组

index： 表示数组里面的索引

val： 表示这个索引位置的值要修改成val这个数据

this.$set( obj, key, val)

obj: 要修改属性的对象

key： 要修改的属性

val: 这个属性要修改成的值

Lou_Lan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
this.$set/Vue.set
sunlizhen的专栏
05-08 207
首先声明this.$set和Vue.set的原理是相同的；都是使用了set函数。set函数是从 …/observer/index 文件中导出的，区别在于Vue.set()是将set函数绑定在Vue构造函数上，this.$set()是将set函数绑定在Vue原型上。 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给对象赋值时，有时候并不会自动更新到视图上去； 当我...
Vue之this.$set Vue.set
weixin_40741265的博客
12-11 356
列表渲染，对数组的操作（增删改查）有三种方式可以实现页面即时更新：1.利用数组的变异方法（pop,push,shift,unshift,sort,reverse,splice） 2.改变数组的引用地址 3.通过使用全局变量Vue.set（数组名，属性，属性值） 对对象的操作，两种方式实现页面更新：1.改变对象的引用地址 2.通过使用Vue.set或者vue.$set方法。 注意：通过数组下标更...
vue.set() (this.$set) 的用法
qq_32849999的博客
06-12 1193
参考：https://blog.csdn.net/gaoxin666/article/details/83656714 经常操作数组数据，并且要求实时更新视图数据，这个时候首先想到的是 vue.set() 方法（注：当发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。），该方法的使用首先要在页面引入vue,应该这样写：import Vue from 'vue'，这样才能...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在这个例子中，`$.ajax`的`success`回调函数中的`this`并没有指向Vue实例，而是指向了回调函数本身，因此无法调用`this.$set`。 ### 报错原因 在JavaScript中，函数内部的`this`值取决于函数的调用方式。在上述...
从vue源码解析Vue.set()和this.$set()
10-18
然而，在某些情况下，直接修改对象或数组的属性可能不会触发视图更新，这时就需要使用 `Vue.set()` 或 `this.$set()` API 来确保数据的变更能被正确地追踪和反映到视图中。 `Vue.set()` 和 `this.$set()` 都是用来...
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
Vue.set()和this.$set()的主要用途是在Vue实例创建后，添加或修改数据对象的属性，并确保这些变更能够被Vue的响应式系统检测到，从而更新对应的视图。这两种方法的使用场景和区别如下： 1. **Vue.set()**： - 可以...
vue中this.$set的用法
我胆小
04-02 2139
vue中this.$set的用法 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么功能，为什么要用它？ 2.怎么用它？ 3.应用场景 1.this.$set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就...
vue2使用$set()使对象新增属性后触发视图更新
weixin_34257076的博客
12-21 192
如图接口获取列表数组后，给每一个数组值插入一个自定义的属性，给一个默认值 后面需要修改插入的属性的值 修改后发现并未更改成功，值未改变。此时需要使用$set方法来出发数据的更新 this.$set(this.data, key, value) //举例 this.$set(this.roleList, key, this.roleList[key]) 复制代码写法为传入三个参数，第一个为所...
Vue.set()和this.$set()的区别和联系，什么场景该用哪一个，清晰明了
黑客与画家
03-20 1164
之前了解这个方法的时候，感觉这一辈子也用不到这个方法，因为当时没有应用场景，但是还真有用的时候????，我相信你们也有用到时候。 从三个方面给大家说一下这个this.set:1.this.set: 1.this.set:1.this.set实现什么功能，为什么要用它？ 2.怎么用它？ 3.应用场景 1.this.set实现什么功能，为什么要用它？当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.set实现什么功能，为什么要用它？ 当你发现你给对象加了
bug管理level1_7【this.$set失效问题】
qq_41436056的博客
11-24 1047
方向: 语法 描述: 在使用iview图片上传时，使用了this.set在handleRemove(file)()函数中强制对this.uploadList进行数据更新以实现删除的效果，但使用this.$set时发现并为未生效，在循环中打印的this.uploadList内容没变 出现原因: 推测是this.$set没生效 技术栈: vue+iview 疑问: this.$set是最近才接触到的，用来解决数据未回显问题（通常数据打印是正确的，但通过v-model绑定是dom元素没有更新），未生效可能是
vue中this.$set()
L1147484597的博客
11-30 245
在VUE中，有时候我们改变了data里面的数据，但是改变的数据并没有更新到页面上去，但是当我们打印的时候显示确实是更新了已经，只是没有更新到页面上而已，也就是说我们更新的数据没有触发响应式，如下： <p>{{arr}}-{{obj}}</p> data() { return { arr:[1], obj:{ a:1, b:2, }, } this.arr[1]="a" //当然这种方式很
vue中this.$set()的用法
Shawsw的博客
07-29 395
vue中this.$set()的用法
Vue.set（添加）和 Vue.delete（删除）属性
weixin_42754922的博客
03-05 5118
Vue 可以添加数据动态响应接口。 Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。 Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。 如果我们需要在运行过程中实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法。 Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制。Vue.del...
this.$set的用法，解决视图不更新
m0_63701303的博客
02-27 668
this.$set的用法，解决视图不更新
vue this.$set 方法
servepeople的博客
09-27 1289
方法是 Vue.js 提供的一个用于在响应式数据中添加新属性的工具函数。它的主要作用是在对象或数组上添加属性或元素，确保这些属性或元素也是响应式的，即可以触发视图的重新渲染。方法是一个在Vue.js中用于处理响应式数据的有用工具，特别是当你需要动态添加属性或元素时。数组的指定索引处添加新元素。这样做可以确保新属性和新元素也是响应式的，当它们发生变化时，会触发视图的更新。通常，当你需要在组件的数据对象中动态添加属性时，Vue.js 推荐使用。来确保添加的属性是响应式的。在上述示例中，我们有一个名为。
Vue中的this.$set
热门推荐
05-10 1万+
当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了 官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 调用方法: Vue.set( target , key , value) target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值 &lt..
Vue.set this.$set
最新发布
05-11
Vue.set() 或者 this.$set() 是 Vue 提供的一种方法，用于在响应式对象上添加一个响应式属性。通常情况下，我们可以直接给一个对象添加属性，但是这样添加的属性是不会具备响应式的特性，即当这个属性的值发生改变时，对应的视图不会自动更新。而使用 Vue.set() 或者 this.$set() 添加的属性，则具有响应式特性。 Vue.set() 的语法如下： ```Vue.set(object, propertyName/index, value)``` 其中，object 表示要添加属性的对象，propertyName/index 表示属性名或者索引值，value 表示属性值。 this.$set() 与 Vue.set() 的用法相同，只不过是在组件中使用的方法。 举个例子，假设我们有一个 data 对象： ``` data: { message: 'Hello World', list: [] } ``` 如果我们想要给 list 数组添加一个响应式属性，可以使用如下代码： ``` this.$set(this.list, 0, 'item'); ``` 这样，在 list 数组中添加了一个值为 'item' 的元素，并且该元素具有响应式特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值