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. 机器学习 - 损失计算-softmax_cross_entropy_with_logits

    tf.nn.softmax_cross_entropy_with_logits(logits, labels, name=None) 第一个参数logits:就是神经网络最后一层的输出 第二个参数la ...

  2. H5_0001:localStorage本地存储

    localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数 ...

  3. Jenkins 子业务日志拆分分析方法

    需求 Jenkins日志打印内容很长,或者并发编译导致,日志内容不容易查看. 对于具体业务失败, 开发者希望看到具体业务自身的日志内容. 解法 tee 命令能够保证, shell命令执行的内容,即往控 ...

  4. shell使用lftp连接ftp和sftp,并可以指定私钥

    lftp连接ftp在脚本中可以 lftp -c "open username:password@host:port; ls /Friso/20180822/click/mobile/SUCC ...

  5. vue之生命周期函数例子

    执行代码看生命周期函数的执行顺序 <!-- 根组件 --> <!-- vue的模板内,所有内容要被一个根节点包含起来 App.vue --> <template> ...

  6. CF1153D Serval and Rooted Tree(树形DP)

      题目链接: https://www.luogu.org/problemnew/show/CF1153D (cf崩了,贴了个落谷的) 题目大意:给你n个点,然后n-1条边,构成一棵树,每个点是子节点 ...

  7. 简易解说拉格朗日对偶(Lagrange duality)

    引言:尝试用最简单易懂的描述解释清楚机器学习中会用到的拉格朗日对偶性知识,非科班出身,如有数学专业博友,望多提意见! 1.原始问题 假设是定义在上的连续可微函数(为什么要求连续可微呢,后面再说,这里不 ...

  8. Ubuntu18.04 VMtools的安装与卸载

    VM不推荐在Ubuntu中使用VMtools而是open-vm-tools,原文地址https://kb.vmware.com/s/article/2073803 安装方式 1 更新系统源 sudo ...

  9. [ZJOI2008]树的统计-树链剖分

    #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+5; #define mid ((l+r)>> ...

  10. 【原创】大数据基础之词频统计Word Count

    对文件进行词频统计,是一个大数据领域的hello word级别的应用,来看下实现有多简单: 1 Linux单机处理 egrep -o "\b[[:alpha:]]+\b" test ...