オブジェクト [Vue.js]

オブジェクト

参考：

オブジェクトの変更検出の注意 | Vue.js [公式]

Vue.js は気難しい オブジェクト編 – Qiita

Vue.js で連想配列を動的に変更させるときの注意点 – Qiita

Vue.js の data プロパティでオブジェクトの変更は $set で置き換えろ！ | 親バカエンジニアのナレッジ帳

リアクティビティ

すでに作成された Vue インスタンスに対して、新しいルートレベルのリアクティブなプロパティを動的に追加することはできない。

Vue.set(object, key, value) メソッドを使ってネストしたオブジェクトにリアクティブなプロパティを追加できる。

ルートレベルのリアクティブなプロパティを動的に追加できないため、インスタンスを初期化する際に全てのルートレベルのリアクティブな data プロパティを予め宣言する必要がある。null で初期化されていても良い。

参考：

変更検出の注意事項 | Vue.js [公式]

リアクティブプロパティの宣言 | Vue.js [公式]

Reactivity In Vue.js (And Its Pitfalls) | Vue.js Developers

Deep props change: v-model vs. this.$set() vs. Object.assign() · Issue #6670 · vuejs/vue – GitHub

$set / Vue.set

$set メソッドでプロパティの値を変更する。

vm.$set(vm.userProfile, 'age', 27)

もしくは、Vue.set を使う。

Vue.set(vm.userProfile, 'age', 27)

参考：

オブジェクトの変更検出の注意 | Vue.js [公式]

dataプロパティに動的に値を追加する方法 (と JS の基本を理解してなかったという話) – Qiita

Set object in data from a method in VUE.js – Stack Overflow

How to add a new property to vue (object) data? · Issue #3340 · vuejs/vue – GitHub

Object.assign

Object.assign でマージしたオブジェクトと置き換える。

vm.userProfile = Object.assign({}, vm.userProfile, {
  name: 'John',
  age:   27
})

参考：

オブジェクトの変更検出の注意 | Vue.js [公式]