メモブログ

技術的なことを書き連ねるブログ

Vue.js で dataの配列内やオブジェクトのプロパティの値がうまく更新されない時

例えば、以下みたいな時、
配列の各要素を直接更新したい、
オブジェクトのプロパティを新しく追加したい、

data(){
  return {
    items:[10,10,10],
    obj:{}
  }
},

methods:{
  updateItem(){
    // 追加されない!
    this.items[0] += 1
  },
  updateObj(){
    // 追加されない
    this.obj.hoge = 1
  }
}

更新されない!なんで!?
ということはよくあるはず。

その場合は、
配列は、以下のように

this.$set(this.items, index, '更新したい値');
this.items.splice(index, 1, '更新したい値');

オブジェクト、以下のように

this.$set(this.obj, "hoge", 1);
this.obj = Object.assign({}, this.obj, { huga: 2, baz: 3 });

すると、ちゃんと反映されます。

codesandbox.io


注意としては
ルートレベルのリアクティブなプロパティを動的に追加することはできない、
あくまでネストされたものだけ、更新、追加出来る、ということ。

ルートレベルのものについては、値が空でもよいのであらかじめプロパティを用意しないとダメです。

■参考記事 リアクティブの探求 — Vue.js