vue怎么给对象数组赋值?this.$set方法帮你解决
Admin 2021-09-09 群英技术资讯 6013 次浏览
vue怎么给对象数组赋值?在vue中,想要实现给对象数组赋值,我们可以使用this.$set()这个方法,那么具体怎样实现呢?为何用this.$set()?下面我们一起来详细的了解一下。
在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值。
// data定义一个集合对象 responseData:[ {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg'}, {'id':'2','name':'男装','price':110,'num':1,'pic':'../static/img/2.jpg'}, {'id':'3','name':'童装','price':118,'num':2,'pic':'../static/img/3.jpg'} ],
// vue方法请求返回集合对象数据 if(res.data.code === 'ok'){ that.totals = res.data.data.total; that.questionList = res.data.data.list; }
// 赋值操作 for(let val of that.questionList){ //此处为重点 hat.$set(val,'discussAnswer','0'); }
解决数组、对象修改后不更新问题
当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了,简单来说this.$set的功能就是解决这个问题的啦。
官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi').
举个例子:
1.Vue写在template中的代码:
<div v-for="(item,index) in list" :key="index" >{{item.name}} </div> <button @click="changeValue" type="primary">改变值</button> </div>
2.export default{}中data数据
data(){ return { list:[ {name:'29Kun',id:1}, {name:'299Kun',id:2}, ] } }
3.点击按钮触发changeValue方法
mounted(){ this.list[2] = {name:'2999Kun',id:3} console.log(this.list[0]); }, methods: { changeValue(){ this.$set(this.list,2,{name:'2999kun',id:3}) } }
调用方法:this.$set( target, key, value )
target
:要更改的数据源(可以是对象或者数组)
key
:要更改的具体数据
value
:重新赋的值
4.在没有点击按钮的时候,界面是这样的,虽然界面没有显示出来,但是控制台已经打印出来了
5.当点击按钮的时候,调用this.$set方法,成功显示第三个属性。
现在大家对vue怎么给对象数组赋值的方法应该都有所了解了,上述示例有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家有帮助,想要了解更多vue框架的内容,大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本篇文章给大家带来了关于javascript的相关知识,主要介绍了深入理解JavaScript内存管理和GC算法,主要讲解JavaScript的垃圾回收机制以及常用的垃圾回收算法;还讲解了V8引擎中的内存管理,希望对大家有帮助。
这篇文章主要介绍了vue项目打包后请求地址错误/打包后跨域操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
node.js的全局变量怎么样使用?新手肯定对于node.js的全局变量不是很了解,对此,下面小编就能给介绍一下全局对象,全局函数,全局变量和准全局变量等等,了解这些对大家学习node.js的全局变量有一定的帮助,下面我们一起来了解看看吧。
vue如何实现筛选功能?大家在一些网站或者软件上,应该都见过筛选功能,例如先筛选出符合条件的信息再搜索,这样能够提高搜索的准确度,因此这篇就主要仿写teambition软件的筛选功能,给大家介绍一下筛选功能是如何实现的。
这篇文章主要介绍了javascript中layim之查找好友查找群组,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008