直接修改数组元素是无法触发视图更新的,如

this.array[0] = {
name: 'meng',
age: 22
}

修改array的length也无法触发视图更新,如

this.array.length = 2;

触发视图更新的方法有如下几种

1. Vue.set

可以设置对象或数组的值,通过key或数组索引,可以触发视图更新

数组修改

Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)

对象修改

Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)

2. Vue.delete

删除对象或数组中元素,通过key或数组索引,可以触发视图更新

数组修改

Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)

对象修改

Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)

3. 数组对象直接修改属性,可以触发视图更新

this.array[0].show = true;
this.array.forEach(function(item){
item.show = true;
});

4. splice方法修改数组,可以触发视图更新

this.array.splice(indexOfItem, 1, newElement)

5. 数组整体修改,可以触发视图更新

var tempArray = this.array;
tempArray[0].show = true;
this.array = tempArray;

6. 用Object.assign或lodash.assign可以为对象添加响应式属性,可以触发视图更新

//Object.assign的单层的覆盖前面的属性,不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2}) //assign与Object.assign一样
this.obj = _.assign({},this.obj,{a:1, b:2}) //merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})

7.Vue提供了如下的数组的变异方法,可以触发视图更新

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

vue数组对象修改触发视图更新的更多相关文章

  1. Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...

  2. VUE 动态给对象增加属性,并触发视图更新。

    在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...

  3. Vue 动态修改data 值 并触发视图更新

    Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

  4. problem:vue之数据变更没有触发视图更新问题

    前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...

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

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

  6. [one day one question] Vue数组变更不能触发刷新

    问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...

  7. Vue 改变数组触发视图更新

    最近给table做了一个点击排序的功能,数组更改以后发现data数据变了,但是视图不更新 写惯了js的我们随手一串代码 this.items[2]={message:"Change Test ...

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

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

  9. vue数组操作不触发前端重新渲染

    暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决. 此外,能够监听的数组变异方法 https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC% ...

随机推荐

  1. 1189: [HNOI2007]紧急疏散evacuate

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3831  Solved: 1119[Submit][Status][Discuss] Descript ...

  2. 线段树的应用xx中学模拟lites

    跟昨天那个自己写的,没有按照模板来的一看风格就不相类似,今天模拟赛的时候就是用的我的那个自己YY的代码,才拿了10分.个人认为关键的问题应该在于对于数据的处理太过繁琐了,所以回来之后,就拿了大佬的程序 ...

  3. 【例题收藏】◇例题·IV◇ Wooden Sticks

    ◇例题·IV◇ Wooden Sticks 借鉴了一下 Candy? 大佬的思路 +传送门+ (=^-ω-^=) 来源:+POJ 1065+ ◆ 题目大意 有n个木棍以及一台处理木棍的机器.第i个木棍 ...

  4. CentOS 6.5通过yum安装 MySQL-5.5

    1.安装mysql-5.5的yum源 rpm -ivh http://repo.mysql.com/yum/mysql-5.5-community/el/6/x86_64/mysql-communit ...

  5. linux防火墙的管理和策略控制

    iptables 一:IPtables防火墙的简介 IPTABLES 是与最新的 3.5 版本 Linux 内核集成的 IP 信息包过滤系统.如果 Linux 系统连接到因特网或 LAN.服务器或连接 ...

  6. scrapy--ipproxy

    不要急于求成,你只要做的是比昨天的你更优秀一点 --匿名 今天给大家讲一下--IpProxy,由于从"http://www.xicidaili.com/nn"爬取,以下是我转载的博 ...

  7. xml中encoding

    前同天和同事在讨论xml里的encoding属性和文件格式的关系,终于彻底的弄清楚了.以前理解的是,xml里的encoding里定义必须与文件格式相匹配.即有这样的xml Introduction&l ...

  8. 学习Pytbon第十七篇,面向对象编程

    面向对象技术简介 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类 ...

  9. 1014-32-首页13-cell的结构分析---导航栏中间title位置的按钮的尺寸设置---setFrame----

    #import "HWTitleButton.h" #define HWMargin 5 @implementation HWTitleButton - (id)initWithF ...

  10. POJ:3190-Stall Reservations

    传送门:http://poj.org/problem?id=3190 Stall Reservations Time Limit: 1000MS Memory Limit: 65536K Total ...