Vue.jsにおいて、dataで宣言したオブジェクトを代入すると値がリンクしてしまう。

Question

Vue.jsで開発しています。

data: function() {
    return {
      inputForm: {},
      inputFormInit: {
        sales_date_year: 2019,
        sales_date_month: 1,
        sales_date_day: 1,
      },
    }
},

methods: {
    inputStart() {
      this.$set(this.inputForm, 'id', '');
      this.$set(this, 'inputForm', this.inputFormInit);
    },
},

こんな感じに記述し、ボタンを押したらinputStart関数を通して値を初期化させています。
inputFormにinputFormInitが入るところまでは良いのですが、
inputForm内の複数の変数は入力フォームとバインドされており、例えば売上年という入力フォームを変更すればinputForm.sales_date_yearが変更されます。

ただ、ここでinputForm.sales_date_yearだけではなく、inputFormInit内のsales_date_yearも同時に更新されてしまいます。
同じようにする記述を書いたわけでもないのですが、オブジェクト変数にオブジェクト変数をつっこむとリンクしてしまうのでしょうか？

this.$set(this, 'inputForm', this.inputFormInit);
この記述をthis.inputForm = this.inputFormInitに変更しても同じでした。

Answer 1

オブジェクトが参照渡しになっていませんか。以下のように変更したらどうでしょうか

this.$set(this, 'inputForm', this.inputFormInit);
↓
this.$set(this, 'inputForm', Object.assign({}, this.inputFormInit));

Comments

[Himamura]

ご回答ありがとうございます。教えてくださった方法で解決しました！
なるほど、参照渡しと値渡しという概念があるのですね…
自分は初心者でございまして、大変勉強になりました。
参照渡しという言葉で検索し、ディープコピー、シャローコピーという言葉も覚えましたので、これからはきちんとディープコピーで扱うようにします。