Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

问题描述：在tap栏下，给每个tab添加一行数据，默认行就可以一直添加，切换到1号的tab添加时，数组已经添加成功，但是视图就是没有变化，来回切换才手动更新

分析：由于 JavaScript 的限制，Vue 不能检测以下变动的数组

解决：使用了_this.$set(item, 'answers', Tmp)根本没有起作用，push是Vue的变异方法，应该可以触发，但现在没有。可能push在最里层，所以没变化。所以我就把最外面的对象做了手动更新_this.editableTabs.sort()

推荐网址：

https://blog.csdn.net/zifeiyu130/article/details/78950244

https://www.cnblogs.com/tugenhua0707/p/7440400.html

https://www.cnblogs.com/dabingqi/p/9180628.html

https://blog.csdn.net/weixin_35103712/article/details/64930119

vue 数组push元素 视图没更新的更多相关文章

  1. vue 数据改变但是视图没更新

    在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...

  2. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  3. vue 数组 新增元素 响应式原理 7种方法

    1.问题 思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. sublime text3 - vue修改data，视图无更新

    ubuntu系统使用sublime text3做vue开发的时候遇到了一个问题,就是修改vue文件并保存后视图页面并不会随之修改,只有重新run dev时修改才会生效,原因没找到 猜想应该是subli ...

  5. vue 数据更新了但视图没改变？试试 $set

    场景 编辑表格中某行数据时,需要把它赋值给对话框表单 this.form,如果直接用 = 赋值,会导致:表单的输入框内容无法二次编辑. 使用 Vue-dev-tool 的 Components 功能测 ...

  6. 解决vue中对象属性改变视图不更新的问题

    在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...

  7. 解决Vue循环中子组件不实时更新的问题

    问题描述 使用Element-UI中的table组件时会遇到一个常见的问题.当在el-table中调用子组件的时候会出现数据更新后,子组件没有重新渲染的问题. eg:资源列表中的健康度组件. 代码如下 ...

  8. js数组增删元素

    操作数组的方法 push() 结尾添加 数组.push(元素) 参数 描述 newelement1 必需.要添加到数组的第一个元素. newelement2 可选.要添加到数组的第二个元素. newe ...

  9. vue数组对象修改触发视图更新

    直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array. ...

随机推荐

  1. DTCC2019第十届中国数据库技术大会将于5月在北京召开

    作为国内顶级的数据领域技术盛会,10年来,DTCC见证了国内数据库技术的迅猛发展,各种分布式数据库.NoSQL.NewSQL技术异军突起,与Oracle.DB2等分庭抗礼,甚至大有超越之势.在这种背景 ...

  2. 微信内置安卓x5浏览器请求超时自动重发问题处理小记

    X5内核  请求超时后会自动阻止请求返回并由代理服务器将原参数重新发送请求到服务层代码.但由于第一次请求已经请求到服务器,会导致出现重复下单.支付等重大问题. 该问题由于腾讯x5浏览器会自动阻止第一次 ...

  3. Rocketmq源码导入eclipse时报错的解决方法

    1,Plugin execution not covered by lifecycle configuration: org.apache.maven.plugins:maven-help-plugi ...

  4. Tomcat增加Context配置不带项目名访问导致启动的时候项目加载两次

    eclipse发布web应用至tomcat,默认方式下访问该项目是需要带项目名称的,例http://localhost:8080/myapp/.现在需要改成这样访问http://localhost.修 ...

  5. 史上最全的PHP常用函数大全，不看看你就out了（还会不断更新哦！）

    纪录了PHP的一些常用函数和函数代码!不要错过了哦. PHP的一些常用函数usleep() 函数延迟代码执行若干微秒.unpack() 函数从二进制字符串对数据进行解包.uniqid() 函数基于以微 ...

  6. 文件上传时出现 Processing of multipart/form-data request failed. Unexpected EOF read on the socket错误

    上传时一直出现这个错误,修改tomcat的server.xml文件,更改tomcat版本,也查阅了网上的很多解决办法,都不能解决问题. 后在stackoverflow的一篇文章上找到了解决方法: 加上 ...

  7. PHP防止网页快速刷新+代理ip访问

    前几天网站收到了一些CC攻击,比较郁闷...这里分享一下,防止网页自动刷新的方法以及阻止代理IP访问网站的方法,代码是分开的,两个功能,需要那个用那个,可以自定义时间间隔,这个代码不止可以防CC攻击, ...

  8. Docker Swarm bind 数据持久化

    Docker Swarm bind 数据持久化 bind:主要将工作节点宿主级文件或目录,同步挂载到容器中. 环境: 系统:Centos 7.4 x64 应用版本:Docker 18.09.0 管理节 ...

  9. 03：open-falcon报警定制

    1.1 配置报警 11111111111111111111

  10. jmeter基本使用

    下载安装,推荐官网http://jmeter.apache.org/download_jmeter.cgi 安装步骤不做赘述,可以看这篇博文https://blog.csdn.net/u0103401 ...