omachizura.com

vue(vuex) jsonを更新してもビューが反映されないとき

vue(vuex)でjsonに要素を追加してもビューが反映されなくて原因の調査に長時間費やしてしまいました。（vuejsのバージョンは2.0です。）

具体的にはvuexのmutationでstateのjsonに要素を追加してもビューが反映されませんでした。

json（オブジェクト）の要素の追加は以下のようにしてもビューは反映されません。

data = {
  'a': 1,
  'b': 2
} //初期値

data.c = 3; //追加

デバッグでdataの中身を確認すると確かにcのデータは追加されているのですが、ビューではなぜかcの値が反映されませんでした。

対処法

要素の追加は以下のようにするとうまくビューに反映されました。

data = {
  'a': 1,
  'b': 2
} //初期値

Vue.set(data, 'c', 3); //追加
プログラミング
JavaScript

関連記事