vue $set 实现给数组集合对象赋值
更新时间：2021年07月08日 09:55:08 作者：CoderYin
这篇文章主要介绍了vue $set 实现给数组集合对象赋值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue $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');
}
Vue this.$set的用法
解决数组、对象修改后不更新问题
一、this.$set实现什么功能，为什么要用它？
当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到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方法，成功显示第三个属性。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vuex中的state使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue项目中axios配置方式(代理配置),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本文主要介绍了vue2之vue.config.js最全配置教程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
vue 监听input输入事件(oninput)的示例代码支持模糊查询
这篇文章主要介绍了vue 监听input输入事件(oninput)支持模糊查询,比如说表格模糊查询，实现一边输入，一边过滤数据，本文通过示例代码给大家详细讲解，需要的朋友可以参考下2023-02-02
在移动端使用vue-router和keep-alive的方法示例
这篇文章主要介绍了在移动端使用vue-router和keep-alive的方法示例，vue-router与keep-alive提供的路由体验与移动端是有一定差别的，感兴趣的小伙伴们可以参考一下2018-12-12
本文主要介绍了基于Vue2.0和Typescript实现多主题切换的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue之this.$router.push页面刷新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
vite打包出现 "default" is not exported by "
这篇文章主要给大家介绍了关于vite打包出现 "default" is not exported by "node_modules/...问题的解决办法,文中通过代码将解决的办法介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考借鉴价值,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了浅谈VUE防抖与节流的最佳解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
axios 实现post请求时把对象obj数据转为formdata
今天小编就为大家分享一篇axios 实现post请求时把对象obj数据转为formdata，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论