vue如何给数组添加新对象并赋值
更新时间：2022年04月20日 14:17:39 作者：今天代码敲了吗
这篇文章主要介绍了vue如何给数组添加新对象并赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
给数组添加新对象并赋值
方法一
适用于数组就只有一组
listData: [{name:"张三",age:18}],
//直接添加对象
listData.sex="男"方法二
适用于数组中有多组信息
listData:[],
list:[{"张三","李四"}]
//比如想把另外一个数组中编列出来的值加入到这个数组中
for (let index = 0; index < this.listlist.length; index++) {
this.listData.push({ name: "" });
this.listData[index].name= this.list[index];
}数组赋值踩过的坑及解决
最近需要在Vue当中完成动态赋值数组操作，从服务器拿到数据后，刷新数组中的数据，但是发现无论使用什么方法都不行，通过打log,发现数据在这里就无法向下执行，而且也没有报任何的异常，最终问题解决，在这里做个记录。
Vue中的数组赋值和在普通的JS中赋值还是有所区别。
- 以下操作可以引起界面刷新：push，pop ，unshift，shift，reverse，sort，splice
- 以下操作不会引起界面刷新：slice，concat ，filter
还有一点需要注意：
如果通过直接赋值或者改变长度是无法让界面刷新的。
（1）通过索引直接设置项。
（2）修改数组长度，mylist.length=3
第二点，在从服务器中获取数据后赋值需要注意一个问题：主体对象的改变。
比如在使用axios对象发起请求后，在返回方法中处理数据需要注意：
注意在axios的then方法中调用对象时，不能使用this对象，因为此时this对象指的是axios实例，所以通过this是获取不到vue实例中的data数据的，必须在外界使用一个值来指向vue实例对象，通过这个外部对象来赋值，才是正确的。
var self;
created:function(){
self = this;
},
mouted:function(){
axios.create({
baseURL: 'url',
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
}).get('xxxxxxxxxx')
.then(function(response){
if(response.data.dataList.length>0){
var datalist = response.data.dataList;
for(var i=0;i<datalist.length;i++){
self.DeviceTypeList.push({devicetype:datalist[i].name});
}
}
})
.catch(function(error){
console.log(JSON.stringify(error));
});
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue打包更新packge.json版本号的全过程,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue监听scroll的坑的解决方法，现在分享给大家，也给大家做个参考，希望给有同样经历的人帮助2017-09-09
这篇文章主要介绍了vue.js el-table动态单元格列合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
vant组件适用于移动端项目,目前项目开源,是市面上做的比较好的开源项目,功能比较强大,本文小编就来为大家介绍一下如何利用vant实现轮播图效果吧2023-10-10
这篇文章主要为大家介绍了Vite多环境配置时间及vite识别环境变量的规则,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码，这篇文章主要介绍了VuePress 快速踩坑小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
Element Plus组件Form表单Table表格二次封装的完整过程
一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下2022-09-09
vue路由第二次进入页面created和mounted不执行问题及解决
这篇文章主要介绍了vue路由第二次进入页面created和mounted不执行问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Vue.js每天必学之构造器与生命周期，告诉大家什么是Vue.js构造器与生命周期，感兴趣的小伙伴们可以参考一下2016-09-09
本篇文章主要介绍了Vue 单文件中的数据传递示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
最新评论