vue如何给数组添加新对象并赋值
作者:今天代码敲了吗
这篇文章主要介绍了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)); }); }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。