[Vue.js]Object.assignの配列コピーで地味にハマったメモ[追記]

リアクティブに配列をコピーしたくて使用。
「空の配列」ひとつに対し、値を格納した配列を複数用意。
タブ切り替え時、コピーする配列を変更。

test.vue

let a = [1, 2, 3, 4, 5];
let b = [6, 7, 8];
let c = [9, 10];

タブ切り替え時、コピーする配列（target部分)を変える。
Object.assign(this.array, target);

その配列の要素数をviewで表示するというような実装を行ったところ、
正しい要素数が表示されずに困った。

表示結果

<p>{{array.length}}</P>
　　　　↓　↓　↓
一番要素数が多いaの配列を格納すると、
それ以降はどのタブに切り替えても、aの要素数から変更されない

原因

参考資料にもある通り、
Object.assign()メソッドはコピーを行うので、
今ある要素に上書きされる形になる。
そりゃ、要素数に変更がないわけだ・・・

test.vue

let a = [1, 2, 3, 4, 5];
let b = [6, 7, 8];
let c = [9, 10];

①aをarryにコピーする
Object.assign(this.array, a);
  → this.arry[ 1, 2, 3, 4, 5];

②次はbをコピーする
Object.assign(this.array, b);
  → this.arry[ 6, 7, 8, 4, 5]; //上書きされているため、要素数は変わらない

対策

配列に格納する前に、初期化処理を入れるようにした。
これで正しい要素数を表示できるようになった。

test.vue

// 配列初期化
this.array.splice(-this.arry.length);
//コピー
Object.assign(this.array, target);

最後に

実際は格納した配列を子に渡すなど、処理が複雑になっているため、
こんな簡単なことに気付くのが遅れてしまいました・・・
勉強あるのみですね！！

追記

コメントよりご指摘いただきました下記の方法でなら、
初期化処理不要で、配列のコピーができました！！
こちらの方がコードがスッキリしていいですね
slice()の参考資料

追記

let a = [1, 2, 3, 4, 5];
let b = [6, 7, 8];
let c = [9, 10];

①配列aのコピーをする
this.array = a.slice()；
→this.array[1, 2, 3, 4, 5]

②①の後、this.arrayに配列bを再度格納する
this.array = b.slice()；
→this.array[6, 7, 8] 　
//上書きではなく、コピー元の配列全体を切り出して新しく配列を生成してくれた！