技術向上

プログラミングの学び、気になるテクノロジーやビジネストレンドを発信

v-forで要素数に変化があるときはkeyにindexを用いない【Vue.js】

備忘です。
v-forで要素数が変化(後で追加、削除を行う)する場合には、
keyにindexを用いてはいけないようです。

keyは要素の変更を、どのデータに対して行うべきか判別するために使われます。
v-forで生成されるindexをkeyに使った場合、要素の追加や削除によってindexが変更されるため、 アニメーションで追いかけられなくなってしまうようです。

下記で詳細に紹介されています。

Vue.js: v-forで項目インデックスをkey属性にしていいのか - Qiita

追加と削除が繰り返される配列要素のオブジェクトに一意のid番号を振る - Qiita


keyには連想配列を使用した固有のidを用い、要素追加の際のidは順にインクリメントするか、 使用されていない最大値を与える必要があります。