data () {
return {
json: {
name: '',
sex: ''
}
}
}
mounted () {
this.json.age = 24
}
直接給json賦值操作,雖然可以新增屬性,但是不會觸發視圖更新
原因是:受 ES5 的限制,Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉為 getter/setter,所以屬性必須在 data 對象上才能讓 Vue.js 轉換它,才能讓它是響應的。
要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發視圖更新。
mounted () {
this.$set(this.json,"age", 24)
}