vue2使用$set()使对象新增属性后触发视图更新

最新推荐文章于 2022-10-14 15:38:27 发布
最新推荐文章于 2022-10-14 15:38:27 发布
阅读量192 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c1cab6e6fb9a049bb7c4f32
版权

如图接口获取列表数组后，给每一个数组值插入一个自定义的属性，给一个默认值

后面需要修改插入的属性的值
修改后发现并未更改成功，值未改变。 此时需要使用$set方法来出发数据的更新 

this.$set(this.data, key, value)

//举例
this.$set(this.roleList, key, this.roleList[key])

复制代码

写法为传入三个参数，第一个为所在对象，第二个为属性名，第三个是修改后的值

这样就完成了对新增属性的值的修改

weixin_34257076
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue this.$set 为对象新增属性，并触发视图更新
weixin_44040486的博客
11-08 4653
vue this.$set 为对象新增属性，并触发视图更新 详情：使用以下代码为data赋值，出现界面不刷新时，无法对文本框进行编辑，输入框只保留操作的最后一步。 this.ruleForm.roleName=this.$store.state.roleSetting.roleinfo.roleinstacename; this.ruleForm.content=this.$store.state...
解决vue中对象属性改变视图不更新的问题
11-27
`Vue.set`是Vue提供的一个全局API，它用于向响应式对象中添加新的属性，并确保该属性也是响应式的，同时触发视图更新。例如： ```javascript Vue.set(vm.obj, 'k1', 'v1'); ``` 在上面的例子中，`vm.obj`是响应式...
vue2.0 给data对象新增属性，并触发视图更新
突维
04-24 357
如下代码，给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新 mounted () { this.stud...
this.$set或Vue.set
Lou_Lan的博客
09-03 286
我在做iview tree的render的时候，发现很多时候对象数组属性明明已经发生变化了，但是在tree上依旧时没有体现出来任何的变化，后来查看资料才在vue文档中列表渲染的注意事项中看到，这是js的限制。 由上面我们就可以看出来，绑定数据之后，我们可以通过this.$set修改数据属性，达到渲染视图的效果。这里this.$set由两种，一种就是这个this.$set，还由一种就是Vue...
vue2.0对象添加新的属性方法$set、object.assign()
最新发布
Hello_MrShu的博客
10-14 3855
我们都知道，vue2.0的双向数据绑定是利⽤Object.defineProperty()来劫持各个属性的setter和getter，在数据变化时，发布消息给订阅者，从而触发相应的监听回调。vue.$set()，它可以手动的把 obj.age 处理成响应式属性，这样，视图就可以更新了。Object.assign(target, obj1, obj2) 合并对象数组中如果使用 index 来修改某一项，如 this.arr[3] = 'lisi' 这同样不是响应式的；也可以使用 set方法
vue 2 vue.$set不生效 或者 数据更新，视图不更新
weixin_47338877的博客
08-24 1604
1
Vue2.0 $set()的正确使用方式
热门推荐
Pany的博客
08-04 14万+
vue2.0 给data对象新增属性，并触发视图更新
VUE 实现动态给对象增加属性，并触发视图更新操作示例
10-15
然而，对于已经创建的实例，直接给对象动态添加新属性并不会触发视图更新，因为Vue无法检测到这些新增的属性。为了解决这个问题，Vue提供了`Vue.set`方法来确保新添加的属性能够被正确地响应化，从而在改变属性值时...
vue2.0中set添加属性后视图不能更新的解决办法
12-09
这就是为什么直接使用`=`赋值或`Vue.$set`可能无法触发视图更新的原因。 `Vue.$set`方法是用来确保新添加的属性能够被Vue的响应式系统追踪。它接受两个参数：对象和属性名，然后将该属性添加到对象上并使其响应式。...
Vue.set()动态的新增与修改数据,触发视图更新的方法
01-19
用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 例： data:{ namelist:[ {message:叶落森,id:1}, {message:姜艳霞,id:2}, {message:姜小帅,id:3} ] }, Vue.set(this...
Vue中的$set的使用
大灰狼的小绵羊哥哥的博客
06-02 4万+
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码： html> head> meta charset="utf-8"> title>vue $settitle> script src="http
Vue2.0 Vue.set的使用
PromiseKeeping的博客
11-29 12万+
Vue.set()响应式控制数据， Vue数据变异方法
iview的树形控件的使用 尤其是点击文字展开子节点的方法
Fatfish_tree的博客
02-21 1591
点击文字展开子节点的方法: this.$set(selectedNode, "expand", !selectedNode.expand); <!--病史采集--> <template> <div class="inquired"> <div class="inquiredContentBox"> <div class="treeBox"> <Tree :
Vue中set的使用,Vue中set与$set的区别
qq_38402659的博客
02-23 8596
Vue.set(data,key,value); data可以是Array or Object 在Vue中直接操作数组的下标,会改变数组,但是不会更新页面真实DOM,例如 &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;div v-for=&amp;quot;(item, index) of list&amp;quot;&amp;amp;gt;
Vue 下拉列表绑定数据并刷新数据（this.$set(this,“roleList“,this.roleList)；）
程序员猫爪
02-11 1653
向下列表格绑定数据 <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <el-table-column label="角色编号" prop="roleId" width="120"/>
vue中this.$set修改对象属性不更新问题
liona_koukou的博客
03-28 5513
小问号，你是否有很多的朋友？ 当我this.$set修改对象属性竟然没有引发更新的时候我是崩溃的，我甚至开始怀疑起这个代码、这个编辑器甚至这个浏览器在针对我_(:з」∠)_ 最终原因是初始对象中没有这个属性时，我直接用 obj.attr= []; 新增了一个attr属性，导致在 this.$set(this.obj, 'attr', '[1,2,3]'); 时没有引发更新 其实新...
Vue 给对象添加新的属性 → this.$set() —— 前端踩坑7
qq_34548699的博客
05-01 963
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 1. event.children = children; // 为vue变量添加属性，这句代码比上句更robust！ 2. this.$set(event,'children',children); ...
vue2.0关于set添加属性后视图不能更新的问题
梦幻般的菜鸟的博客
03-22 7259
今天发现原来写的页面的bug 总的来说就有一个组件，有加减号和次数显示，第一次点击加号会用set给food对象添加属性count，然后再次点击加号就会count++，这没毛病。 if (!this.food.count) { Vue.set(this.food, 'count', 1); } else { this.food.count+
vue 组件绑定的值发生变化后，组件UI效果不生效
我有一个梦想的专栏
01-08 1693
问题场景 我使用vue 做前端开发，现在我有一个脚本树，想要只是搜索功能，这个搜索是在前端完成的，但是当脚本树的数据和层次结构较深时，输入搜索后，可能需要1-2秒的时间响应，这时就希望在搜索开始的时候加入loading效果，结束后取消loading。 脚本树长这样： 点击搜索后希望使用iview 的 Spin 组件, 期望结果如下： 也就是加个遮罩层，有个Loaing，按照iview的组件文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值