vue改数组和对象值(vue $set 实现给数组集合对象赋值)
类别:编程学习 浏览量:1172
时间:2021-10-11 00:45:58 vue改数组和对象值
vue $set 实现给数组集合对象赋值vue $set 数组集合对象赋值在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值。
// data定义一个集合对象 responseData:[ {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg" alt="vue改数组和对象值(vue $set 实现给数组集合对象赋值)" border="0" />
// 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()这个方法了,简单来说this.$set的功能就是解决这个问题的啦。
官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi').
二、怎么用它?
举个例子:
1.Vue写在template中的代码:
<li v-for="(item,index) in list" :key="index" >{{item.name}} </li> <button @click="changeValue" type="primary">改变值</button> </li>
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双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue的修饰符都有哪些(详解Vue的sync修饰符)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- 小白vue教学(尤大大新活petite-vue的实现)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue集成文件上传插件(vue 实现上传组件)
- vue应用转flutter(Vue和Flask通信的实现)
- vue 优雅写法(使用vue实现手写签名功能)
- vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
- vue 底层原理(浅谈Vue插槽实现原理)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- 雄藩崛起 奇兵队与幕末长州藩军事改革(雄藩崛起奇兵队与幕末长州藩军事改革)
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
热门推荐
- php7 入门(php7新特性的理解和比较总结)
- 关闭visual studio 的实时调试
- css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)
- laravel消息机制(laravel框架中间件 except 和 only 的用法示例)
- 织梦dedecms优化安全设置指南(DedeCms V5.5 性能优化方法分享)
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- mysql索引分几种(MySQL 覆盖索引的优点)
- 常用的Chrome谷歌浏览器插件
- js的模块模式设计(如何理解JavaScript模块化)