オブジェクトを代入する
<body>
<div id="app">
<p>オブジェクト1</p>
<p>name:{{obj1.name}}</p>
<p>count:{{obj1.count}}</p>
<button v-on:click="change1()">変更1</button>
<p>オブジェクト2</p>
<p>name:{{obj2.name}}</p>
<p>count:{{obj2.count}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
obj1: {name: 'obj1', count: 1},
obj2: {name: 'obj2', count: 1}
},
methods: {
change1(){
this.obj2 = this.obj1;
this.obj2.count++;
}
}
});
</script>
</body>
オブジェクト1とオブジェクト2を用意します。
ボタンを押すとchabge1関数が呼び出されます。
オブジェクト1をオブジェクト2に代入した後、オブジェクト2のcountを1増やします。
(変更前)
↓
(変更後)
オブジェクト2は、オブジェクト1と同じようにnameがobj1になり、countは1増えて2になりました。想定どおりです。
しかしオブジェクト1のcountも2になってしまいました。
これは、オブジェクト1をオブジェクト2に参照渡しで代入したためです。
このため、オブジェクト2を変更すると、それに合わせてオブジェクト1まで変更されてしまいました。
オブジェクトをコピーして代入する
<body>
<div id="app">
<p>オブジェクト1</p>
<p>name:{{obj1.name}}</p>
<p>count:{{obj1.count}}</p>
<button v-on:click="change2()">変更2</button>
<p>オブジェクト2</p>
<p>name:{{obj2.name}}</p>
<p>count:{{obj2.count}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
obj1: {name: 'obj1', count: 1},
obj2: {name: 'obj2', count: 1}
},
methods: {
change2(){
this.obj2 = Vue.util.extend({}, this.obj1);
this.obj2.count++;
}
}
});
</script>
</body>
this.obj2 = Vue.util.extend({}, this.obj1);の部分で、オブジェクト1をコピーして代入しています。
(変更前)
↓
(変更後)
オブジェクト2のcountだけが2になりました。