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中,对象数组多层嵌套时,更新数据更新页面的更多相关文章

  1. vue中修改数组,dom未更新的问题

    vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...

  2. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  3. vue中对象属性改变视图不更新问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? let vm = new Vue{ el: '#app', da ...

  4. 解决vue中对象属性改变视图不更新的问题

    在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...

  5. vue中对象数组去重

    其实很简单,一般的数组去重可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去重 unique(arr) { const res = new M ...

  6. fastjson中对象转化为字符串时过滤某字段

    fastjson中对象转化为字符串时过滤某字段,有两种方法: 一.在该字符定义上方添加"@JSONField(serialize=false)"注解: 二.调用含有Property ...

  7. JavaScript中对象数组去重方法

    在一次对后端返回的对象数组的操作时想通过indexOf()或者includes()的方法来实现对对象数组的去重但是行不通,因为用indexOf()返回的都是-1,一下记录两种对象数组(更具指定属性)去 ...

  8. vue中改变数组或对象,页面没做出对应的渲染

    原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...

  9. vue elementUI 表单校验(数组多层嵌套)

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq ...

随机推荐

  1. python格式化输出的几种方式

    第一种  字符串拼接  就不写了 下面的是 第二 第三 第四种 name = input("name:") age = int(input("age:")) p ...

  2. 查看open office运行状态

    打开SSH工具: 1.ps -ef|grep soffice 2.cd /opt/jboss-eap-7.0 3.cd logs 4.tail -f subscription.log 然后就可以操作( ...

  3. Redis的Cluster配置

    Redis的Cluster配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装Redis并启动 1>.修改Redis的配置文件(本实验只有三个节点) [root@no ...

  4. C++ 实现简单命令行学生管理系统

    C++ 实现简单命令行学生管理系统 预览: 编译环境是macOS.system("clear") 在windows下请换成 system("cls") #inc ...

  5. jmeter接口入门操作手册

    基础操作手册:Windows Mr丶菜鸟 1.下载jmeter  ,jmeter是一款基于java的开源工具,可以测试接口和性能,需要jdk环境,下载jmeter地址:https://jmeter.a ...

  6. wireshark如何抓取localhost包

    1.首先安装NPCAP 下载地址:https://nmap.org/download.html 安装时,记得勾上最后一个选项:wincap模式 安装完成后,一定要重启系统 2.安装wireshark ...

  7. 【原创】大叔案例分享(3)用户行为分析--见证scala的强大

    一 场景分析 用户行为分析应用的场景很多,像线上网站访问统计,线下客流分析(比如图像人脸识别.wifi探针等),比较核心的指标有几个: PV | UV | SD | SC 指标说明: PV(Page ...

  8. linux磁盘阵列 逻辑卷管理器

    Difficult doesn't mean impossible.It simply meansthat you have to work hard.困难并不代表不可能,它仅仅意味着你必须努力奋斗. ...

  9. vue项目移植tinymce踩坑

    转载:https://segmentfault.com/a/1190000012791569?utm_source=tag-newest 2019-2-18 貌似这篇文章帮了大家一些小忙最近tinym ...

  10. MVC4 发布到II7或者IIS7.5遇到NO Find问题

    1.出现的错误页面