1. 程式人生 > 其它 >vue中的this.$set()

vue中的this.$set()

今天在遇到一個問題,在可編輯表格中,輸入一個值,要自動改變與它同一行的另一個值,但是不管寫只有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中,檢視層才會響應該資料的變化