1. vue数组更新界面无变化

1.1. 说明

  • 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相同的数据添加到尾部。初步一看好像没啥问题,实际上我碰到的就是有时候成功有时候数据一点没有显示
this.arrList[this.arrList.length] = {};
this.arrList[this.arrList.length-1].dataList = newArr;
this.arrList[this.arrList.length-1].header = 'A幢';

1.2. 解决

由于 JavaScript 的限制,Vue 不能检测以下数组的变动:
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
  • 解决方法请参考上面的链接,我这里给出我的代码的改法
this.arrList[this.arrList.length] = {};
this.$set(this.arrList,this.arrList.length-1,{dataList:newArr,header:'A幢'});

1.3. 总结

  • vue里还是有些方法不能进行数据绑定的操作的,对这些方法还是要着重看下,理解下

vue数组更新界面无变化的更多相关文章

  1. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  2. vue 数组更新 this.$set(this.dataList, data.index, data.data)

    vue 数组更新 this.$set(this.dataList, data.index, data.data) https://www.cnblogs.com/huangenai/p/9836811 ...

  3. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  4. VUE 数组更新

    1.数据方法分类: (1)原数组改变 push pop unshift shift reverse sort splice (2)原数组未变,生成新数组 slice concat filter map ...

  5. vue 数组更新(push【可用】,$set,slice,filter,map【都属于浅拷贝】)问题

    this.$axios.post('https://....php',this.$qs.stringify({ user: 'suess' })) .then(res => { this.dat ...

  6. vue 数组更新检测注意事项

  7. vue数组操作不更新视图问题

    vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

  8. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  9. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

随机推荐

  1. nodemcu固件的烧录及lua开发

    一.板子介绍 NodeMCU 1.0/ESP 8266 12E 该模块是安信可公司生产的,并且提供全部开发资料. 对该模块的开发有两种方式: 一种是基于乐鑫官方推出的SDK开发包在 安信可ESP的一体 ...

  2. IComparable<T>.CompareTo(T) 方法

    IComparable<T>.CompareTo(T) 方法 定义 命名空间: System 程序集: System.Runtime.dll, mscorlib.dll, netstand ...

  3. Directory traversal

    Find the hidden section of the photo galery. 找到相册的隐藏部分. 直接能够目录遍历: 虽然galerie禁止访问,但是密码就在里面----直接爆破或者爬虫 ...

  4. [NOI2009][codevs1846]KCOJ0191]植物大战僵尸

    题目描述 Description Plants vs. Zombies(PVZ)是最近十分风靡的一款小游戏.Plants(植物)和Zombies(僵尸)是游戏的主角,其中Plants防守,而Zombi ...

  5. MapReduce running in uber mode (jvm重用)

    原文 http://blog.csdn.net/samhacker/article/details/15692003 yarn-site.xml  主要是这几个参数 - mapreduce.job.u ...

  6. ORA-25153错误及解决办法

    出现下图错误 原因就是没有临时表空间,所以要建立临时表空间,下面的语句,记得把地址换成你自己想放的地方. alter tablespace temp add tempfile 'C:/temp.dbf ...

  7. Spring MVC标签

    1.我们平时使用表单的时候,一般都是这样: <form id="form" action="Login.do" method="post&quo ...

  8. matlab 彩色图像转化成灰度图像,灰度图像降低灰度级

    灰度级数k,k=2^b,称该图像为b比特图像. 降低灰度级数是靠2的幂次方 网上代码:https://blog.csdn.net/silence2015/article/details/6892736 ...

  9. Kubernetes之Taints与Tolerations 污点和容忍

    NodeAffinity节点亲和性,是Pod上定义的一种属性,使Pod能够按我们的要求调度到某个Node上,而Taints则恰恰相反,它可以让Node拒绝运行Pod,甚至驱逐Pod. Taints(污 ...

  10. IDEA中,使用maven-可视化-下载jar包的source和javadoc

    需求:想看jar包的源码和文档注释 操作:在Idea的右侧Maven窗口,选中一个Module,然后展开Dependencies|,选中一个依赖包,按住鼠标右键单击,选择Download Source ...