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实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue里使用create, mounted调用方法
Apr 26 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类中Static方法效率测试代码
2010/10/17 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
老生常谈python之鸭子类和多态
2017/06/13 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python Pexpect模块的使用
2020/12/25 Python
python中if嵌套命令实例讲解
2021/02/25 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
项目专员岗位职责
2013/12/04 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
大学生村官任职感言
2014/01/09 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
国企干部对照检查材料
2014/08/22 职场文书
办公室禁烟通知
2015/04/23 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Fluentd搭建日志收集服务
2022/09/23 Servers