vue 给数组添加新对象并赋值


Posted in Vue.js onApril 20, 2022

给数组添加新对象并赋值

方法一

适用于数组就只有一组

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.js 相关文章推荐
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
解读Vue组件注册方式
May 15 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 #Vue.js
vue封装数字翻牌器
Apr 20 #Vue.js
vue特效之翻牌动画
Apr 20 #Vue.js
解决vue中provide inject的响应式监听
Apr 19 #Vue.js
vue3种table表格选项个数的控制方法
Apr 14 #Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
You might like
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
Js中sort()方法的用法
2006/11/04 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
使用python加密自己的密码
2015/08/04 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
extern在函数声明中是什么意思
2014/01/19 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
致100米运动员广播稿
2014/02/14 职场文书
房屋转让协议书范本
2014/04/11 职场文书
给学校的建议书范文
2014/05/15 职场文书
食品安全承诺书
2014/05/22 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
python如何查找列表中元素的位置
2022/05/30 Python