computed計算屬性監聽不到數組元素變化的問題

簡單記錄一下這次遇到的問題

在methods中的某個事件會改變arr數組中的元素

clickBtn () {
　　this.arr[0] = false
}

 

但在computed中監聽不到這個數組中元素的變化，

isAble() {
　　if (this.arr[i]) {
　　　　return true;
　　}
　　return false;
}

解決辦法就是在methods中這樣寫

clickBtn () {
　　this.$set(this.arr, 0 ,false)
}

這樣computed就可以檢測到啦

this.$set()的官方解釋是這樣的

向響應式對象中添加一個屬性，並確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hi')

https://cn.vuejs.org/v2/api/#Vue-set

補充：

當你給你個對象添加一個屬性之后在控制台可以輸出，但視圖沒有更新，這個時候就需要用到this.$set()了

這種情況也可以在方法中的第一行添加這樣一句

this.$forceUpdate();

這樣可以進行視圖層重新渲染