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 ...
随机推荐
- python list的使用
list列表的常用方法有: #!/usr/bin/env python # -*- coding:utf- -*- #以下方法全在python2..x版本运行,请3.x以上的小伙伴们在print(放入 ...
- css 选择器符号
1. 空格 —— “后代选择器” 例如下面这个例子,表示div元素里面所有的p元素 div p { ... } 2. > —— “子选择器” 例如下面这个例子,表示div元素里面所有的子代(不含 ...
- JS的基础知识回顾
前言:JS应用在浏览器端,基于浏览器事件执行,功能十分强大,不容错过
- LFYZ-OJ ID: 1028 背包问题
背包问题 题目描述 简单的背包问题.设有一个背包,可以放入的重量为s.现有n件物品,重量分别为w1,w2-,wn,(1≤i≤n)均为正整数,从n件物品中挑选若干件,使得放入背包的重量之和正好为s.找到 ...
- oldboy s21day07(深浅拷贝及文件操作)
#!/usr/bin/env python# -*- coding:utf-8 -*- # 1.看代码写结果'''v1 = [1, 2, 3, 4, 5]v2 = [v1, v1, v1]v1.app ...
- SpringBoot系列: CommandLineRunner接口的用处
========================================使用 CommandLineRunner 对Spring Bean进行额外初始化==================== ...
- Elasticsearch6.3.2启动过程源码阅读记录
Elasticsearch6.3.2启动过程源码阅读记录 网上有很多关于es的源码分析,觉得自己技术深度还不够,所以这些文章只是看源码过程中的一个笔记,谈不上分析. 整个启动过程以类名.方法名,按顺序 ...
- requests中自定义adapter
# encoding:utf-8 import sslfrom requests import sessionsfrom requests import Requestfrom requests.ad ...
- selenium——find_element_by_xx 与 find_element(By.XX,'XXXX')
- Visual studio 配置
解决方案 一个解决方案的文件结构: .sln 项目目录 debug release 其中,debug与release放置最终生成的dll或exe,项目目录下包含 头文 ...