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

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

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

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

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

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

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

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

y = Vue.util.extend({}, x);

関連記事