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. 苹果cms安装及配置详细教程

    听说这个好!php+mysql的 下载 http://www.maccms.com/down.html 下载之后解压到你的网站跟目录中,就像这个样子的   后台目录 然后重要的一步来了,在ftp工具上 ...

  2. [js]变量提升-关于条件

    条件函数变量提示于全局中函数变量提升不一样. 条件中: 函数变量提升, 只是声明(现新版本浏览器中) if(g()){ function g() { return true } console.log ...

  3. metasploit安装,按官网说明

    mkdir -p $HOME/git cd $HOME/git git clone git@github.com:YOUR_USERNAME_FOR_GITHUB/metasploit-framewo ...

  4. qt 安装包生成

    (Qt Installer Framework)程序简易打包教程 2017年06月19日 14:38:47 carman_风 阅读数:3559 标签: installerqt框架 更多 个人分类: 软 ...

  5. 使用 Weinre 调试移动网站

    在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用.但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了.因此,移动开发人员都 ...

  6. select2 api参数中文文档

    select2 api参数的文档   具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength int 最小数 ...

  7. python全栈第一章

    第一章 Python基础变量定义规则:1.变量名只能是字母数字或者下划线的任意组合2.变量名的第一个字符不能是数字3.关键字不能申明为变量名定义方式:1.驼峰体AgeOfSzp2.下划线隔开Age_o ...

  8. 第一篇——Struts2的工作原理及HelloWorld简单实现

    Struts2工作原理: 一个请求在Struts框架中的处理步骤: 1.客户端初始化一个指向Servlet容器(例如Tomcat)的请求: 2.这个请求经过一系列的过滤器(Filter): 3.接着F ...

  9. docker 启动失败

    今天本来想抽空弄一下openshift,新装了个centos结果docker起不来. 报错内容: [root@master docker]# systemctl status docker.servi ...

  10. Windows cmd 一些命令

    运行是Windows的必要组成部分,可以简单理解为一个应用程序快速调用的组件.通过“运行”窗口,可以调用Windows中任何应用程序甚至DOS命令.一般可以搜索百度百科 微软件(窗口) + R    ...