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防抖与节流
Nov 24 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
详细聊聊vue中组件的props属性
Nov 02 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 多行多列显示
2009/08/15 PHP
php array的学习笔记
2012/05/10 PHP
php发送post请求的三种方法
2014/02/11 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
JavaScript基本对象
2007/01/11 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
AngularJS快速入门
2015/04/02 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python实现直播推流效果
2019/11/26 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
师范大学应届生求职信
2013/11/21 职场文书
会计找工作求职信范文
2013/12/09 职场文书
个人授权委托书范本
2014/04/03 职场文书
春节联欢会策划方案
2014/05/16 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年终个人总结报告
2015/03/09 职场文书
公司出纳岗位职责
2015/03/31 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis