くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Vue.jsでの配列・オブジェクト操作のお作法

Vue.jsでは、配列やオブジェクトの代入を、うまく検知できないらしい。。
お作法があるので、調べてみたとこの備忘録。

配列

// 追加: pushを使う
let addItem = ...
this.items.push(addItem);

// 変更: spliceを使う
let modifyIndex = 1;
let modifyItem = ...:
this.items.splice(modifyIndex, 1, modifyItem);

// 削除: spliceを使う
let modifyIndex = 1;
this.items.splice(modifyIndex, 1);

オブジェクト

// 例: this.obj.key = newObj;

// 追加・変更: Vue.setを使う場合
this.$set(this.obj, "key", newObj);
// もしくは、
Vue.set(this.obj, "key", newObj)

// 追加・変更: Object.assign()を使う場合
this.obj = Object.assign({}, vm.obj, {  
 key: newObj,  
})

// 削除
Vue.delete(this.obj, "key")

以上!!

参考にしたサイト様