vue中的this.$set()
阿新 • • 發佈:2021-10-22
今天在遇到一個問題,在可編輯表格中,輸入一個值,要自動改變與它同一行的另一個值,但是不管寫只有console.log列印改變了值,介面上就是不會同步改變。
然後就找到this.$set()
這個方法
簡單來說就是,發現給物件陣列加了一個屬性,在控制檯能打印出來,但是卻沒有更新到檢視上時,也許這個時候就需要用到this.$set()這個方法了
官方解釋:向響應式物件中新增一個屬性,並確保這個新屬性同樣是響應式的,且觸發檢視更新。它必須用於向響應式物件上新增新屬性,因為 Vue 無法探測普通的新增屬性 (比如this.myObject.newProperty = 'hi')
this.$set()的使用方法
呼叫方法:this.$set( target, key, value )
-
target:要更改的資料來源(可以是物件或者陣列)
-
key:要更改的具體資料
-
value :重新賦的值
很多人是因為新加的屬性沒有在頁面顯示。
原因是:
由於受JavaScript的限制,vue.js不能監聽物件屬性的新增和刪除,因為在vue元件初始化的過程中,會呼叫getter和setter方法,所以該屬性必須是存在在data中,檢視層才會響應該資料的變化