vue 对对象的属性进行修改时，不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时，我console.log出来的是已经更改的object ,可是页面始终没有变化

缘由以下：

**受现代 JavaScript 的限制 (并且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。因为 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，因此属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。 https://cn.vuejs.org/v2/guide/reactivity.html **

官方API：Vue.set():

此时咱们须要知道Vue.set()须要哪些参数，

调用方法：Vue.set( target, key, value )

target：要更改的数据源(能够是对象或者数组)

key：要更改的具体数据

value ：从新赋的值

Tip:Vue.set()在methods中也能够写成this.$set()

解决办法：

this.$set(this.oilBrandsArr[index], 'checked', true)

**注意: **若是要对这个对象进行$set操做就不要用别的方法对这个对象进行操做，不然this.$set()则不会生效

this.oilBrandsArr[i].checked = true

别的地方又用this.$set() 则都不会触发更新

附加：有时你想向一个已有对象添加多个属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。可是，这样添加到对象上的新属性不会触发更新。在这种状况下能够建立一个新的对象，让它包含原对象的属性和新的属性：

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })