千家信息网

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

发表于:2025-01-20 作者:千家信息网编辑
千家信息网最后更新 2025年01月20日,这篇文章主要介绍了vue怎么给数组添加新对象并赋值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么给数组添加新对象并赋值文章都会有所收获,下面我们一起来看看吧。给
千家信息网最后更新 2025年01月20日vue怎么给数组添加新对象并赋值

这篇文章主要介绍了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

    关于"vue怎么给数组添加新对象并赋值"这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对"vue怎么给数组添加新对象并赋值"知识都有一定的了解,大家如果还想学习更多知识,欢迎关注行业资讯频道。

    0