omachizura.com

vuejs オブジェクトをコピーして値渡しをする

javascriptでjsonなどのオブジェクトをコピーする場合、単純に以下のような方法ではうまくいきません。

var x = {
  "商品": {
    "バナナ": {
      "単価": 100,
      "個数": 3
    },
    "リンゴ": {
      "単価": 200,
      "個数": 5
    }
  }
};
var y = x;

yに値は入りますが、yはxそのものを参照している状態なので、yの値を変更するとxの値も変更されてしまいます。

yはxのオブジェクトをコピーし、xとは全く別のオブジェクトとして扱いたい場合は少し工夫が必要です。

一度文字列に変換してから代入すれば、別のオブジェクトとして扱われます。

y = JSON.parse(JSON.stringify(x));

vuejsを使っている場合は以下のようにすればコピーすることができます。

y = Vue.util.extend({}, x);
プログラミング
JavaScript

関連記事