Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@haruf19

[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);

最後に

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

追記

コメントよりご指摘いただきました下記の方法でなら、
初期化処理不要で、配列のコピーができました!!
こちらの方がコードがスッキリしていいですね:relaxed:
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]  
//上書きではなく、コピー元の配列全体を切り出して新しく配列を生成してくれた!

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
haruf19

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?