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 ...
随机推荐
- 【Sql Server】SQL SERVER 收缩日志
事务日志记录着在相关数据库上的操作,同时还存储数据库恢复(recovery)的相关信息. 收缩日志的原因有很多种,有些是考虑空间不足,有些则是应用程序限制导致的. 下面介绍的是在简单模式下,进行收缩操 ...
- 分布式监控系统开发【day37】:需求讨论(一)
本节内容 为什么要做监控? 常用监控系统设计讨论 监控需求讨论 如何实现监控服务器的水平扩展? 监控系统架构设计 一.为什么要做监控? 熟悉IT监控系统的设计原理 开发一个简版的类Zabbix监控系统 ...
- Client-Side Template Injection with AngularJS
<html> <head> <meta charset="utf-8"> <script src="https://cdn.bo ...
- CSS 水平垂直居中的几种实现方法
前言 项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style> ...
- ssm心得
dao层 mybatis mapper工厂spring接管后,直接拿到mapper接口就可以来实现方法 service层 注入dao层的mapper实现各种方法.. controller 层 注入se ...
- Centos7 安装 scrapy
Centos7 安装 scrapy ( *:此python版本为 2.7 ) 1.先安装 python (2.7) 在安装 scrapy 要先安装 python 和 pip, 链接:https:// ...
- Centos7中一键安装zabbix
作者:邓聪聪 #!/bin/shlog=/root/install.logexec 2>>$log #关闭SELINUX,防火墙 systemctl stop firewalld.serv ...
- memcached性能测试之Twemperf
Twemperf又名mcperf,是一款memcached的性能测试工具.Mcperf就像httperf,但它基于memcached的协议,它使用memcached的ASCII协议并且能够快速的产生大 ...
- 清北-Day6-regular
题目描述 给出一个只包含左括号和右括号的字符串,插入若干左右括号(可以插在任意位置)之后使得字符串长度为$ 2\times n $ 且是一个合法的括号序列.求最后能组成多少种不同的合法括号序列. [合 ...
- linux软件管理
People who cannot find time for recreation are obliged sooner or later to find time for illness.腾不出时 ...