Bootstrap

vue中data对象数据的添加删除引发视图无法更新的问题

由于ES5的限制,VUE无法更新对象的属性添加删除,需要使用$set
包括根据索引添加,删除数组的操作vue都无法自动检测更新
$set使用方法

this.$set(object, key, value)
object: vue data中的属性
key要添加的键名
value相应的值

如下例子:

data(){
	return () {
		obj: {},
		arr: ''
	}
	mouted() {
		this.obj.name = 'test' //虽然添加成功了。但vue无法更新
		this.$set(this.obj, 'name', 'test') //正确的打开方式
		this.arr[0] = 1 //一样的,vue无法检测由数组索引添加删除的操作
		this.arr.push(1) //正确打开方式
		//删除数组也是一样的,用array.slice()进行删除
	}
}

vue官网的解释
https://cn.vuejs.org/v2/guide/reactivity.html

在这里插入图片描述
在这里插入图片描述

;