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 })