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. jmeter录制https请求

    工具:Jmeter4.0 + Java1.8 需求:对某https网站进行 登录-修改信息-退出 场景的压力测试 方法:使用Apache JMeter HTTP(S) Test Script Reco ...

  2. 公网k8s

    dm :32750/swagger/ 统一在   cd /opt/iot 删除容器,自动创建容器 dm 更新dm和acl包  dm源文件chart包   cd /var/lib/helmrepo/ h ...

  3. git中设置http代理和取消http代理

    设置http代理 git config --global https.proxy https://127.0.0.1:1080 取消http代理git config --global --unset ...

  4. JavaBean持久化

    JavaBean持久化并不局限于Swing构件的存储,可以使用该机制存储任意对象的集合,只要遵守一些简单的规则即可. XMLEncoder内置了对下列类型的支持: ●null ●所有基本类型及其包装器 ...

  5. export to excel

    using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel;npoi是重点. 定义一个exporttoe ...

  6. Kafka笔记1(初步认识)

    Kafka 被称为“分布式提交日志”或“分布式流平台” 文件系统或数据库提交日志用来提供所有事务的持久记录,通过重放这些日志重建系统状态,同时Kafka数据是按照一定顺序持久化保存的,可以按需读取 K ...

  7. vim中的分屏操作

    title: vim中的分屏操作 date: 2017-11-14 21:45:11 tags: vim categories: 开发工具 在命令行中: vim -On file1 file2 # O ...

  8. python3.x 读写文件要使用UTF8编码的话需要。。

    读写文件常遇到编码不正确的情况,都用UTF8读写文件就好了,在读写的时候加上编码格式:encoding='UTF-8'如下:with open(filename, 'r', encoding='UTF ...

  9. consul 集群

    主机运行 : consul agent -server -bootstrap-expect 2  -data-dir D:\consul  -node=winyh -bind=192.168.10.1 ...

  10. Linux服务器---百科mediawiki

    Mediawiki         Mediawiki是一个强大的维基软件,可以实现页面编辑.图像和多媒体管理. 1.下载mediawiki软件(“https://www.mediawiki.org/ ...