锐客网

  1. 首页 > 睿知 > it技术 > >

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
    以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

      推荐阅读


      上一篇：Python基于HOG+SVM/RF/DT等模型实现目标人行检测功能

      下一篇：技术管理进阶——你遇到过耍小聪明的同学吗（）