Vue.jsでのオブジェクトのプロパティの追加と削除方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsでのオブジェクトのプロパティの追加と削除方法について、簡単に解説していきます。

オブジェクトにプロパティの追加

Vue.jsでオブジェクトにプロパティを追加する際には注意が必要です。

通常のプロパティの追加の仕方ではリアクティブな状態にならないためです。

var app = new Vue({
  el: '#app',
  data: {
    hogeObject: {}
  }
});

app.$set(app.hogeObject, 'hoge', 1)

上記のコードのように、$setメソッドを使って、追加するのが正しい方法です。

オブジェクトに複数のプロパティの追加

オブジェクトに複数のプロパティを追加する際も同様に注意しましょう。

var app = new Vue({
  el: '#app',
  data: {
    hogeObject: {}
  }
});

app.hogeObject = Object.assign({}, app.hogeObject, { hoge1: 1, hoge2: 2 })

上記のコードのように、Object.assignメソッドを使って複数のプロパティを追加します。

Object.assignメソッドでは第一引数のオブジェクトに、第二引数以降のオブジェクトのプロパティが適用され、返り値として返されます。

オブジェクトのプロパティの削除

オブジェクトのプロパティの削除にも注意が必要となります。

削除の場合も同じように、方法によってはリアクティブに反映されません。

var app = new Vue({
  el: '#app',
  data: {
    hogeObject: { hoge1 :1, hoge2: 2 }
  }
});

app.$delete(app.hogeObject, 'hoge2')

上記のように、$deleteメソッドを使って削除する方法が正しい削除の仕方です。