码迷,mamicode.com
首页 > 编程语言 > 详细

vue数组对象修改触发视图更新

时间:2018-02-28 13:00:23      阅读:1761      评论:0      收藏:0      [点我收藏+]

标签:变异   bsp   com   ash   element   object   each   oda   分享图片   

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

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数组对象修改触发视图更新

标签:变异   bsp   com   ash   element   object   each   oda   分享图片   

原文地址:https://www.cnblogs.com/mengff/p/8482867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!