はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Next.js】v-forのときにElements in iteration expect to have 'v-bind:key' directivesというエラーが出たときの対処法

はじめに

v-forで一覧を表示しようとしたところ、

Elements in iteration expect to have 'v-bind:key' directives

といったエラーが出てしまいました。

その解決法を書いていきたいと思います。

解決法

”キー”を付け加えることで解決できます!

before

<li v-for="item in list">...</li>


after

<li v-for="item in list" v-bind:key="item.id">...</li>

さいごに

どうやらバージョンによってキーを設定しなければならない?みたいです。

今後も気を付けていけたらなと思います。