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. Token防止表单重复提交和CSRF攻击

    Token,可以翻译成标记!最大的特点就是随机性,不可预测,一般黑客或软件无法猜测出来. Token一般用在两个地方: 1: 防止表单重复提交 2: anti csrf攻击(Cross-site re ...

  2. [再寄小读者之数学篇](2014-10-27 Frobenius 范数是酉不变范数)

    对任两酉阵 $U,V$, 有 $$\bex \sen{A}_F=\sen{UAV}_F. \eex$$ 事实上, $$\beex \bea \sen{UAV}_F^2&=\tr(V^*A^*U ...

  3. Resources (being shared)

    论文下载求助论坛 数学杂志的模版 答辩PPT模版 发一篇文章的经历 数学期刊名称缩写 英文书籍下载 英文书籍下载 中文书籍下载 数学分析高等代数考研试题官方下载地址

  4. ntp 服务:Server dropped: Strata too high

    1.通过ntpdate -d 服务端IP,显示Server dropped: Strata too high vi /etc/ntp.conf 在ntpd服务端的配置中添加 server 127.12 ...

  5. Django对于模型的数据操作

    一.引入模型的包 from myApp.models import Grades,Students 二.查询所有数据 #objecs是类的隐藏属性:类名.objects.all()可以查询所有数据 G ...

  6. 微信小程序 Button控件 点击传值给JavaScript

    直接看例子吧: WXML:直接看Button,用“data-”(data-total)传值,后台如何获取,继续看下面JS代码. <view class="infothird" ...

  7. # 20175333曹雅坤《Java程序设计》第1周学习总结

    教材学习内容总结 1.学习第一章PPT,安装JRE,JDK并配置path环境参数 2.在windows上使用dos命令运行教材第一章代码Hello.java和People.java 3.下载使用git ...

  8. Oracle 数据文件迁移

    背景 这两天做一个oracle数据库迁移,以前都是用exp.imp来走,这次用到了expdp.impdp,的确有些优势,但同时又想起了只是拷贝数据文件迁移的方式,其实这个方式不常用做迁移,更多用在磁盘 ...

  9. 实现JWT刷新机制以及让过期时间更精确

      借助accessToken和refreshToken实现   accessToken控制刷新间隔,refreshToken控制最长过期时间   Min过期时间 = refreshToken过期时间 ...

  10. 使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果

    ThreeSixty 是生成可拖动的360度预览图像序列的 jQuery 插件.只需要在你的 HTML 页面包引入最新的 jQuery 和 threesixty.js 文件就可以使用了,支持键盘上的箭 ...