vue筆記 $set的正確用法
阿新 • • 發佈:2018-12-10
vue2.0 給data物件新增屬性,並觸發檢視更新
如下程式碼,給 student物件新增 age 屬性
data () {
return {
student: {
name: '',
sex: ''
}
}
}
眾所周知,直接給student賦值操作,雖然可以新增屬性,但是不會觸發檢視更新
mounted () {
this.student.age = 24
}
原因是:受 ES5 的限制,Vue.js 不能檢測到物件屬性的新增或刪除。因為 Vue.js 在初始化例項時將屬性轉為 getter/setter,所以屬性必須在 data 物件上才能讓 Vue.js 轉換它,才能讓它是響應的。
要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發檢視更新。
但是,值得注意的是,網上一些資料寫的$set()用法存在一些問題,導致在新接觸這個方法的時候會走一些彎路!
錯誤寫法:this.$set(key,value)
mounted () {
this.$set(this.student.age, 24)
}
正確寫法:this.$set(this.data,”key”,value’)
mounted () {
this.$set(this.student,"age", 24)
}