vue中,对象数组多层嵌套时,更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的
1、对象更新
this.a={title:'列表1’};
this.a.title='列表2’; <h1>{{a.title}}</h1>
虽然,a的数据已经被修改成功,但是页面并不能动态更新
需要使用,以下这种方式去更新
this.$set(a,'title','列表2');
//或者
Vue.set(a,'title','列表2');
2、数组更新
同理:
this.arr=[,,,];
tihs.arr[]=; <span v-for="value in arr">{{value}}</span>
//1 2 3 4
以上方式虽然改变了变量中的值,同样不能响应到view 中
Vue.set(arr,索引值,value);
//或者
arr.splice(索引值,元素数目,value);
3、数组对象的组合更新
this.arr=[{
key:'key1',
value:[]
},{
key:'key2',
value:[]
}];
例如,想要将arr[0].value重新赋一个数组,可以使用
this.arr[].value.splice(, , ...newArr);
//或者
this.$set(this.arr[], "value", newArr);
复杂的嵌套逻辑时,如果想要跟新某个值,一定要先选择到该层级后,再使用以上方式进行修改
vue中,对象数组多层嵌套时,更新数据更新页面的更多相关文章
- vue中修改数组,dom未更新的问题
vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...
- Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
- vue中对象属性改变视图不更新问题
常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? let vm = new Vue{ el: '#app', da ...
- 解决vue中对象属性改变视图不更新的问题
在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...
- vue中对象数组去重
其实很简单,一般的数组去重可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去重 unique(arr) { const res = new M ...
- fastjson中对象转化为字符串时过滤某字段
fastjson中对象转化为字符串时过滤某字段,有两种方法: 一.在该字符定义上方添加"@JSONField(serialize=false)"注解: 二.调用含有Property ...
- JavaScript中对象数组去重方法
在一次对后端返回的对象数组的操作时想通过indexOf()或者includes()的方法来实现对对象数组的去重但是行不通,因为用indexOf()返回的都是-1,一下记录两种对象数组(更具指定属性)去 ...
- vue中改变数组或对象,页面没做出对应的渲染
原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...
- vue elementUI 表单校验(数组多层嵌套)
在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq ...
随机推荐
- URL和URI以及两者的区别和联系
1.url: 统一资源定位符(Uniform Resource Locator,URL)是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一 ...
- Slow ReadProcessor&Error Slow BlockReceiver错误日志分析(转)
1.总结 "Slow ReadProcessor" 和"Slow BlockReceiver"往往是因为集群负载比较高或者某些节点不健康导致的,本文主要是帮助你 ...
- openstack项目【day23】:keystone组件网关协议
本节内容 一 静态页面和动态页面 二 什么是web server 三 什么是网关协议 3.1 引子 3.2 网关协议 四 网关协议CGI.FastCGI.WSGI.UWSGI 五 网关协议与keyst ...
- Java NIO系列教程(一) Java NIO 概述
<I/O模型之四:Java 浅析I/O模型> 一.阻塞IO与非阻塞IO 阻塞IO: 通常在进行同步I/O操作时,如果读取数据,代码会阻塞直至有 可供读取的数据.同样,写入调用将会阻塞直至数 ...
- linux,pthread(转)
互斥量.条件变量与pthread_cond_wait()函数的使用,详解(二) 1.Linux“线程” 进程与线程之间是有区别的,不过linux内核只提供了轻量进程的支持,未实现线程模型.Linu ...
- 为Nexus配置阿里云代理仓库
Nexus默认远程仓库为https://repo1.maven.org/maven2/ 慢死,还常连不上. 可以添加阿里云代理仓库 URL:http://maven.aliyun.com/nexus/ ...
- 第二十节: 深入理解并发机制以及解决方案(锁机制、EF自有机制、队列模式等)
一. 理解并发机制 1. 什么是并发,并发与多线程有什么关系? ①. 先从广义上来说,或者从实际场景上来说. 高并发通常是海量用户同时访问(比如:12306买票.淘宝的双十一抢购),如果把一个用户看做 ...
- 轴对称 Navier-Stokes 方程组的点态正则性准则 I
在 [Lei, Zhen; Zhang, Qi. Criticality of the axially symmetric Navier-Stokes equations. Pacific J. Ma ...
- [物理学与PDEs]第3章习题5 一维理想磁流体力学方程组的数学结构
试将一维理想磁流体力学方程组 (5. 10)-(5. 16) 化为一阶拟线性对称双曲组的形式. 解答: 由 (5. 12),(5. 16) 知 $$\beex \bea 0&=\cfrac{\ ...
- [物理学与PDEs]第1章第7节 媒质中的 Maxwell 方程组 7.2 媒质交界面上的条件
通过 Maxwell 方程组的积分形式易在交界面上各量应满足交界面条件: $$\beex \bea \sez{{\bf D}}\cdot{\bf n}=\omega_f,&\sex{\omeg ...