Vue中this.$set()

已于 2022-06-29 14:27:38 修改
阅读量366 收藏
点赞数
分类专栏： vue 文章标签： 大数据
于 2022-06-29 14:27:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57396733/article/details/125465948
版权

问题引入

在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

代码示例

 语法    this.$set(this.xxx.xxx,”key”,value')

谁扔的炮仗啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
vue后台管理-编辑不了的问题，使用this.$set()
sika-master的博客
05-14 628
项目场景： 点击某一行的编辑的时候，获取到值，但是修改不了的问题 例如：在项目中有时间回显的问题。但是直接赋值之后，不能再次修改 原因分析： 打印出来时间的值，发现能编辑时间的地方和不能编辑时间的地方的值的格式不同，原因是：vue没有监听到数据，所以修改不了 解决方案： 提示：这里填写该问题的具体解决方案： 使用this.$set()去设置，就可以监听到，就能够修改新的值了 ...
Vue直接赋值，不自动渲染到视图上了？浅谈Vue中的$set
Northseaman的博客
10-26 542
使用Vue进行开发的过程中，有时会遇到一种情况：当Vue实例生成后，再次给左值时，并不会自动更新到视图上去，灵异事件发生了！ 仔细翻阅Vue的官方文档，你将会发现 原来文档里面都已经写了，哎呀，果然还是得多读书。 当然，在具体的生产过程中，不可能一开始就知道了所有需要的键，那么我们还可以，动态对data进行键值的添加。如下，其中Vue.set，当然你也可以使用vm.$set，这是别名。 Vue.set(data,key, value) ;= >Vue.set(...
$set小概率的赋值失败问题都被我碰上了
weixin_45293868的博客
09-15 146
这用到this.$set()的方法用来更新对象中添加的键值对，发现能更新，但是点击切换不能在浏览器上显示。试好多次都没有找到问题，上百度查找发现问题出在图上的第二部，把第二步注释掉就没有问题了，就可以正常切换，非常的神奇，不知道什么原理。
vue 中$set的使用（数据赋值时，有时候并不会自动更新到视图上去怎么解决？）
weixin_39950595的博客
12-25 996
这个问题可能是很多新手会遇到的问题：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。 其实最主要的原因还是因为对vue文档不熟悉：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 当我们为对象修改一个或者添加一个属性时： 普通的修改虽然能改变该对象上的属性，但视图层却没有更新。 由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为...
this.$set给自己赋值不生效，需重新赋值一个变量【vue】
huangfuyk.的博客
02-18 2211
$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
this.$set() 不生效
随身笔记
05-06 1184
但是实际应用中有的时候我们使用this.$set()改变了值，但是视图依旧没有发生变化，这个时候需要使用先this.$delete()在使用this.$set()，确保能够出发视图。this.$set()主要功能是解决改变数据时未驱动视图的改变的问题，也就是实际数据被改变了，但我们看到的页面并没有变化。
【Vue进阶】双向绑定视图不更新，$set()失效的解决方法
  ╭じò ぴé╮。Qi
08-26 2151
在开发的过程中，我们经常遇到数据更新后，而视图不更新的情况，有的使用`this.$set()`就能解决，然而有的即使用了`this.$set()`视图也不更新。特此记录下处理“**数据更新后而视图不更新**”问题的解决方法。
Vue 解决数据更新视图不更新问题$set()方法
南城旧梦_de博客
05-10 2877
vue set()
Set集合在for循环中调用只生效1次的问题
攻城狮Kevin
04-20 1148
如果Set集合声明在for循环代码之外，则Set集合的元素在for循环里，只会被调用一遍，调用完毕后，Set集合就释放掉了，测试代码如下： object test { def main(args: Array[String]): Unit = { val jsonstr = "{\"tag_value\":\"9.0\",\"pay_type\":\"a\"}" val j...
【JavaScript源代码】vue 中this.$set 动态绑定数据的案例讲解.docx
12-29
vue 中this.$set 动态绑定数据的案例讲解 　感觉网上对this.$set的讲解乱糟糟的，我来总结一下对它单个数据、对象、数组、json数据的绑定.　话不多说直接上代码：　<template>　<div>　<!-- 单个数据 -->　...
vue 点击添加数据以后进行去重的解决办法
ZhaoGongZi_Y的博客
10-30 727
vue 点击添加数据以后进行去重的解决办法
Vue知识回顾与总结【四】vm.$set和vm.$delete
云间月
04-18 466
Vue知识回顾与总结【四】 vm.$set 用法回顾 vm.$set()相信使用vue的人都不陌生，主要用于解决对象新增属性，删除属性时数据无法侦测问题，以及通过索引操作数组元素数据无法侦测的问题。用法如下： vm.$set( target,key ,value ) 实现原理 在Vue.js的原型上设置$set属性，所有以**vm.$**开头的方法都是在Vue.js的原型中实现的。 处理数组...
Vue中this.$set的用法(解决数组、对象修改后不更新问题)
热门推荐
XinKun的博客
03-01 2万+
一、this.$set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’). 二、怎么用它？ 举个例子： 1.Vu
Vue使用$set失效
wsj8848的博客
05-24 840
vue中使用$set失效
el-input使用this.$set动态赋予初始值,却无法修改（解决办法）
weixin_38345306的博客
06-27 808
el-input使用this.$set动态赋予初始值,却无法修改
Vue2.0 $set()的正确使用方式（亲测可用）
qq_42970173的博客
06-02 1287
vue2.0 给data对象新增属性，并触发视图更新 如下代码，给student对象新增 age 属性（简单的一个map对象） data () { return { student: { //这里也可以是数组对象 name: '', sex: '' } } } 正确写法：this.$set(this.data,”key”,value’) 复杂点的 multTableTabs: [{
【仿RabbitMQ消息队列项目day2】使用muduo库中基于protobuf的应用层协议进行通信
最新发布
weixin_74113106的博客
05-21 588
使用muduo库中基于protobuf的应用层协议进行通信
vue中this.$set
06-01
在Vue中，如果我们想要在响应式对象中添加一个新的属性，我们需要使用Vue.set或this.$set方法来完成。这是因为Vue不能检测到对象属性的添加或删除（注意，这不适用于数组）。Vue.set方法的第一个参数是要添加属性的对象，第二个参数是属性名，第三个参数是属性值。 在这段代码中，this是指当前Vue组件的实例。$set是Vue实例的一个方法，用于向响应式对象中添加新属性。第一个参数item.channelConf是要添加新属性的对象，第二个参数'channelExtConf'是要添加的新属性的名称，第三个参数extObj是要添加的新属性的值。这样，我们就可以将extObj作为item.channelConf对象的一个新属性添加进去，并且该属性的值是响应式的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值