this.$set的用法

最新推荐文章于 2024-03-31 08:13:33 发布
最新推荐文章于 2024-03-31 08:13:33 发布
阅读量437 收藏
点赞数
分类专栏： vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46653486/article/details/122466996
版权
这篇博客介绍了Vue框架中this.$set方法的作用和使用方式。当试图更新一个未在data选项中定义的对象属性，且该更新未能反映到视图上时，this.$set用于确保视图更新。文章通过例子展示了在模板中以及export default{}中如何使用，并对比了vue.set和this.$set()的区别。
摘要由CSDN通过智能技术生成

1.this.$set实现什么功能，为什么要用它？

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this. s e t （ ） 这 个 方 法 了 ， 简 单 来 说 t h i s . set（）这个方法了，简单来说this.

最低0.47元/天 解锁文章
梁小茹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 中vuex和store基本用法——取值之this.$store.getters.getValue & 存值之this.$store.commit(‘setValue‘, paramVal)
weixin_44867717的博客
04-12 2万+
Vue2 中vuex和store基本用法——取值之this.KaTeX parse error: Expected 'EOF', got '&' at position 24: …tters.getValue &̲ 存值之this.store.commit(‘setValue’, paramVal) 1、应用场景 在不同路由中使用同一个会改编的参数，也就是需要一个全局参数。即声明一个最简单的store后，怎么存入全局变量，怎么获取全局变量。 2、操作步骤 2.1、声明一个store的inde
vue的this.$ 常见的用法
最新发布
weixin_45266691的博客
05-24 627
是一个常见的用法，用于访问 Vue 实例的一些内置属性、方法或者插件提供的功能。: 访问用于发起 HTTP 请求的插件，如 axios、vue-resource 等。属性和方法，具体可根据需要查看 Vue.js 的官方文档以及所使用的插件的文档。: 在当前实例上监听一个自定义事件，但是只触发一次。: 响应式地添加一个属性到 Vue 实例的数据对象。: 响应式地删除 Vue 实例的数据对象的属性。: 在子组件中触发父组件绑定的事件。: 监听 Vue 实例上的数据变化。: 获取 Vue 实例的数据对象。
vue中this.$set()的用法
袁的博客
10-20 1万+
vue中this.$set()的用法
53 v-bind 和 v-model 的实现和区别
970655147的专栏
03-31 1505
注意观察如下的 model.sex 属性, 是在函数中使用 model.sex 创建的属性, 这种方式创建的属性不是响应式的, 然后 导致了上面的问题, 所以 编码的时候, 视图中使用到的属性, 最好是在 data 中枚举出来, 避免一些 不必要的响应式的问题。这里可以看到上面的 v-model 转换之后的结果, 传入给子组件的 value 为 “1”, 注册了一个 input 的处理函数, 其中包含了 _vm.$set(_vm.model, “sex”, $$v) 的回调处理。
v-model双向绑定时数据不能实时变化使用this.$set
qq_46691281的博客
05-29 611
<Test3 :options="options"/> 在Test2.vue文件中有一个子组件Test3，父组件对子组件进行传值，传的值是一个对象options: { width: '20px' } 当发生点击时，想改变options对象的值this.options = {};this.options.width = '30px' 如果使用这种方式的话，在Test3组件中接受的options参数并不会实时发生变化 <input v-model="options.width" @click
vue中 this.$set的用法详解
10-16
为了使视图能够响应这个变化，我们可以使用`this.$set`方法： ```javascript mounted () { let art = { message: 'first', id: '4' }; this.$set(this.items, 0, art); // 使用$set更新视图 } ``` 在`methods`中...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在这个例子中，`$.ajax`的`success`回调函数中的`this`并没有指向Vue实例，而是指向了回调函数本身，因此无法调用`this.$set`。 ### 报错原因 在JavaScript中，函数内部的`this`值取决于函数的调用方式。在上述...
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 开发过程中，有时我们需要修改数据并期望视图能够...了解它们的工作原理和正确使用方法，能够避免出现预期外的视图更新问题，提高Vue应用的健壮性和用户体验。
从vue源码解析Vue.set()和this.$set()
10-18
`Vue.set()` 是全局方法，可以直接在 Vue 构造函数上调用，而 `this.$set()` 是 Vue 实例的方法，可以在组件实例内部使用。 当尝试像这样修改响应式对象的属性时，Vue 无法自动检测到变化： ```javascript const ...
JS——this.$set用法（为某个对象添加属性）
qq_43201350的博客
07-25 2888
this.list = {} this.myName = 'abc' this.$set(this.list,"name",this.myName)
this.$set的正确使用
小太阳的博客
05-29 900
this.$set(obj, key, value) 我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性 <template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div
Vue中的$set的使用
热门推荐
大灰狼的小绵羊哥哥的博客
06-02 4万+
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码： html> head> meta charset="utf-8"> title>vue $settitle> script src="http
vue this.$set 为对象新增属性，并触发视图更新
weixin_44040486的博客
11-08 4651
vue this.$set 为对象新增属性，并触发视图更新 详情：使用以下代码为data赋值，出现界面不刷新时，无法对文本框进行编辑，输入框只保留操作的最后一步。 this.ruleForm.roleName=this.$store.state.roleSetting.roleinfo.roleinstacename; this.ruleForm.content=this.$store.state...
Vuex中store缓存报错.set is not a function解决方法
weixin_44530406的博客
04-24 2063
报错信息： cache.js代码： 解决：cacheUserInfo是一个匿名函数尾部，所以需要增加一个（）。
vue中$set的用法
splx2013的博客
07-28 9457
一.什么是$set 要明白什么是set我们就先要了解vue的数据双向绑定的原理，VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。 如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。 二.具体应用 <!-- vue中$set的用法 --> <template> <div>
Vue中this.$set的用法(解决数组、对象修改后不更新问题)
m0_67841039的博客
11-02 2001
vue中this.$set的用法
vue在某些情况下v-model不更新的原因
qq_40409143的博客
11-25 2578
有的时候数据更新了，但是页面没有更新，可以使用 this.set(target,key,value)例如：应用场景this.set(target,key,value) 例如： 应用场景 this.set(target,key,value)例如：应用场景this.set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.set（）这个方法了，简单来说this.set（）这个方法了，简单来说this.set（）这个方法了，简单
vue的this.$set使用
前端-黎姿
03-30 499
this.$set作用： 手动更新界面，相当于Vue.set( ) 原理: 首先，vue能更新数据，依赖于vue的数据是响应式数据，defineproperty里面的get和set会监听数据的变化，从而更新界面 使用场景： 当数据改变了，但是界面没有变化 使用方法： 数组： this.set(arr,index,val)−参数：数组，索引，修改的值对象：this.set(arr, index,...
this.$set使用方法
12-13
$set方法的使用方法如下： ```javascript this.$set(object, key, value) ``` 其中，object是要添加属性的对象，key是要添加的属性名，value是要添加的属性值。例如，我们可以在Vue组件中使用$set方法来添加一个新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值