vue如何给数组添加新对象并赋值

 更新时间:2022年04月20日 14:17:39   作者:今天代码敲了吗  
这篇文章主要介绍了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));
          });
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue基于Teleport实现Modal组件

    vue基于Teleport实现Modal组件

    Teleport 提供了一种干净的方法,允许我们控制在 DOM 中哪个父节点下渲染了 HTML,而不必求助于全局状态或将其拆分为两个组件。
    2021-05-05
  • vue开发中的base和publicPath的区别

    vue开发中的base和publicPath的区别

    本文主要介绍了vue开发中的base和publicPath的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-07-07
  • vue+Element实现搜索关键字高亮功能

    vue+Element实现搜索关键字高亮功能

    这篇文章主要为大家详细介绍了vue+Element实现搜索关键字高亮功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue3一个元素如何绑定两个或多个事件

    vue3一个元素如何绑定两个或多个事件

    这篇文章主要介绍了vue3一个元素如何绑定两个或多个事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue移动端项目渲染pdf步骤及问题小结

    vue移动端项目渲染pdf步骤及问题小结

    这篇文章主要介绍了vue移动端项目渲染pdf步骤,vue-pdf的插件在使用的过程中是连连踩坑的,基本遇到3个问题,分别在文中给大家详细介绍,需要的朋友可以参考下
    2022-08-08
  • antfu大佬的v-lazy-show教我学会了怎么编译模板指令

    antfu大佬的v-lazy-show教我学会了怎么编译模板指令

    这篇文章主要介绍了antfu大佬的v-lazy-show,我学会了怎么编译模板指令示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

    Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

    今天小编就为大家分享一篇Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML)),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue项目开发中setTimeout等定时器的管理问题

    vue项目开发中setTimeout等定时器的管理问题

    这篇文章主要介绍了vue项目开发中setTimeout等定时器的管理问题,需要的朋友可以参考下
    2018-09-09
  • vue3获取、设置元素高度的代码举例

    vue3获取、设置元素高度的代码举例

    这篇文章主要给大家介绍了关于vue3获取、设置元素高度的相关资料,小编通过实际案例向大家展示操作过程,操作方法简单易懂,需要的朋友可以参考下
    2024-08-08
  • 浅谈Vue 自动化部署打包上线

    浅谈Vue 自动化部署打包上线

    这篇文章主要介绍了浅谈Vue 自动化部署打包上线,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论