$set新增屬性

當vue的data裏邊聲明或者已經賦值過的對象或者數組(數組裏邊的值是對象)時,向對象中添加新的屬性,如果更新此屬性的值,是不會更新視圖的。

根據官方文檔定義:如果在實例創建之後添加新的屬性到實例上,它不會觸發視圖更新。

當你把一個普通的 JavaScript 對象傳入 Vue 實例作爲 data 選項,Vue 將遍歷此對象所有的屬性,並使用 Object.defineProperty 把這些屬性全部轉爲 getter/setter。

解決方法

Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上:

  • 全局使用
    Vue.set(vm.obj, 'e', 0)
  • 局部使用
    this.$set(this.obj,'e',02)

有時你想向已有對象上添加一些屬性,例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是,添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象,讓它包含原對象的屬性和新的屬性:

// 代替 Object.assign(this.obj, { a: 1, e: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, e: 2 })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章