vue .js 配列の値が期待通りに変更できない

Question

前提・実現したいこと

サンプルコードを書いているのですが、想定した通りの挙動になりません。

サンプルコードの任意の<div>のクリックイベントで、対象メソッドを呼び出して処理を行う箇所の挙動がおかしくなってしまいます。具体的には、一度のクリックで全ての配列の値が変更されてしまいます。
２、３回クリックすると、想定の挙動になります。

上記のサンプルコードで行いたいことは下記の通りです。

• 配列の各値に対してv-forで繰り返し<div>として表示する。
• 任意の<div>をクリックした場合、値の真偽により処理を分ける。

1. 真の場合、そのdivにバインドしている配列要素を削除する。
2. 偽の場合、divにバインドしている値を変更する（真偽や、他のプロパティの値を書き換える処理）。

気になること

配列の各値に、ユニークなキーを保持していないことが原因なのかと思っています。

Answer 1

created フックで以下のように配列を初期化していますが、ここに間違いがあります。

this.dataLists = this.dataLists.fill({ isactive: false, task: "none" });

おそらく長さ12 の配列である dataLists に、12個のオブジェクトを作って設定する、ということを意図されているのだと思いますが、実際にご提示のコードで作成されるオブジェクトは 1個だけで、そのオブジェクトへの参照を dataLists[0] ~ dataLists[11] に設定しています。

結果、dataLists のすべての要素は同じ要素への参照を持ってしまい、要素の変更に対して配列全体が変更を受けた可能用に見えてしまっています。

数回クリックした際に想定通りの動作になるのは、callSelect 内の else ブロックで新たなオブジェクトを生成して設定しているためです(ここで変更されなかった部分については依然問題が発生するはずです)。

以下のように１２個それぞれに別のオブジェくトを作成して配列に設定してください。

for (let i=0; i<this.dataLists.length; i++) {
  this.$set(this.dataLists, i, { isactive: false, task: "none" })
    // this.dataLists[i] = { ... } とすると、
    // Vue.js が変更を検知できない可能性があります。
    // そのため、this.$set() を利用します
    //
    // ループの中でオブジェクトを定義しているのがポイントです。
}

Comments

[kurimaron7]

回答ありがとうございます。
回答通りに修正したところ、解決いたしました。
下記追加で２点ほどお聞きしたいのですが、余談ですので回答いただけなくとも後日ベストアンサーにさせていただきます。
①fillにオブジェクトではなくプリミティブ型の単一データを引数とした場合は、値渡しとして
各配列の要素が独立した値になると考えて良いでしょうか？（fillのリファレンスを見たところ、オブジェクトの場合だけが参照コピーとなると記述されていましたので）
②今回の回答例では、for文で配列を回数文操作していますが、forEachや他の配列操作系メソッドでも代用可能でしょうか？

ご回答いただけますと幸いです。

[R.Mizukami]

①はい。プリミティブ型ならこのような現象は起こりません。
②はい。ただし new Array(12).map(() => ({ isActive: true, task: "none"})) や new Array(12).forEach( ~ ) などとすると、おそらく想定外の動作をするので注意が必要です。(詳しくはこちらをご参考ください→ https://qiita.com/s-shin/items/88b2b6d4387312fe000a )

[kurimaron7]

ありがとうございます！
とても参考になりました。