$set 在 Vue 中用于更新數組或對象的屬性。
在 Vue 中,當你改變數據時,Vue 會自動檢測到數據變化并重新渲染視圖。但是當你需要在一個數組或對象中改變一個屬性時,Vue 無法檢測到該屬性的變化,因為它無法檢測到數組或對象中元素的變化。這就是需要使用 $set 的時候。
Vue.set(array, index, value)
Vue.set(object, key, value)
vm.$set(array, index, value)
vm.$set(object, key, value)
Vue.set 或 vm.$set 方法可以用于添加數組元素或改變對象屬性并觸發視圖更新。
在 $set 方法中,第一個參數指定要更新的數組或對象,第二個參數是數組元素的索引或對象屬性的鍵,第三個參數是要設置的新值。
例如,假設你有以下數據:
data() {
return {
items: [
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 25 },
{ name: 'Charlie', age: 28 }
]
}
}
如果你需要改變 items 數組中第二個元素的 name 屬性,你可以使用 $set 方法:
Vue.set(this.items[1], 'name', 'Bobby')
// or
this.$set(this.items[1], 'name', 'Bobby')
此時,視圖將自動更新,反映出數組中元素的更改。
總之,$set 提供了一種自動觸發視圖更新的簡單方法來改變數組或對象的屬性值。