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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue实现登陆页面开发实践
May 30 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开发中常用的8个小技巧
2008/08/27 PHP
取得父标签
2006/11/14 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
Python 3.x 新特性及10大变化
2015/06/12 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
python 反向输出字符串的方法
2018/07/16 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python安装gdal的两种方法
2019/10/29 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
大学四年的个人自我评价
2014/01/14 职场文书
校庆活动方案
2014/03/31 职场文书
婚假请假条怎么写
2014/04/10 职场文书
公司踏青活动方案
2014/08/16 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
初三英语教学计划
2015/01/23 职场文书
舞出我人生观后感
2015/06/16 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
Python OpenCV之常用滤波器使用详解
2022/04/07 Python