omachizura

仕事メモ、役に立ったスキルをまとめています。


vue 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); //追加