vue 数组push元素 视图没更新
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元素 视图没更新的更多相关文章
- vue 数据改变但是视图没更新
在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...
- vue修改elementUI的分页组件视图没更新问题
转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...
- vue 数组 新增元素 响应式原理 7种方法
1.问题 思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- sublime text3 - vue修改data,视图无更新
ubuntu系统使用sublime text3做vue开发的时候遇到了一个问题,就是修改vue文件并保存后视图页面并不会随之修改,只有重新run dev时修改才会生效,原因没找到 猜想应该是subli ...
- vue 数据更新了但视图没改变?试试 $set
场景 编辑表格中某行数据时,需要把它赋值给对话框表单 this.form,如果直接用 = 赋值,会导致:表单的输入框内容无法二次编辑. 使用 Vue-dev-tool 的 Components 功能测 ...
- 解决vue中对象属性改变视图不更新的问题
在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...
- 解决Vue循环中子组件不实时更新的问题
问题描述 使用Element-UI中的table组件时会遇到一个常见的问题.当在el-table中调用子组件的时候会出现数据更新后,子组件没有重新渲染的问题. eg:资源列表中的健康度组件. 代码如下 ...
- js数组增删元素
操作数组的方法 push() 结尾添加 数组.push(元素) 参数 描述 newelement1 必需.要添加到数组的第一个元素. newelement2 可选.要添加到数组的第二个元素. newe ...
- vue数组对象修改触发视图更新
直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array. ...
随机推荐
- jmeter录制https请求
工具:Jmeter4.0 + Java1.8 需求:对某https网站进行 登录-修改信息-退出 场景的压力测试 方法:使用Apache JMeter HTTP(S) Test Script Reco ...
- 公网k8s
dm :32750/swagger/ 统一在 cd /opt/iot 删除容器,自动创建容器 dm 更新dm和acl包 dm源文件chart包 cd /var/lib/helmrepo/ h ...
- git中设置http代理和取消http代理
设置http代理 git config --global https.proxy https://127.0.0.1:1080 取消http代理git config --global --unset ...
- JavaBean持久化
JavaBean持久化并不局限于Swing构件的存储,可以使用该机制存储任意对象的集合,只要遵守一些简单的规则即可. XMLEncoder内置了对下列类型的支持: ●null ●所有基本类型及其包装器 ...
- export to excel
using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel;npoi是重点. 定义一个exporttoe ...
- Kafka笔记1(初步认识)
Kafka 被称为“分布式提交日志”或“分布式流平台” 文件系统或数据库提交日志用来提供所有事务的持久记录,通过重放这些日志重建系统状态,同时Kafka数据是按照一定顺序持久化保存的,可以按需读取 K ...
- vim中的分屏操作
title: vim中的分屏操作 date: 2017-11-14 21:45:11 tags: vim categories: 开发工具 在命令行中: vim -On file1 file2 # O ...
- python3.x 读写文件要使用UTF8编码的话需要。。
读写文件常遇到编码不正确的情况,都用UTF8读写文件就好了,在读写的时候加上编码格式:encoding='UTF-8'如下:with open(filename, 'r', encoding='UTF ...
- consul 集群
主机运行 : consul agent -server -bootstrap-expect 2 -data-dir D:\consul -node=winyh -bind=192.168.10.1 ...
- Linux服务器---百科mediawiki
Mediawiki Mediawiki是一个强大的维基软件,可以实现页面编辑.图像和多媒体管理. 1.下载mediawiki软件(“https://www.mediawiki.org/ ...