Elements in iteration expect to have 'v-bind:key' directives のエラーの話
症状
Vueでv-forディレクティブを使おうとしたら起きたエラー。
原因は「v-for使うときはkey属性を指定することが推奨されている」のでそれに従ってコードを書いてくれというもの。
Vueの公式ドキュメントに書いてました。ドキュメントをちゃんと読まないとね...
jp.vuejs.org
対処法
以下のようなコードだと
<!-- before --> <li v-for='todo in todos'> <p>{{todo.id}}</p> <p>{{todo.text}}</p> </li>
以下のように修正すればよい。
<!-- after --> <li v-for='todo in todos' :key='todo.id'> <p>{{todo.id}}</p> <p>{{todo.text}}</p> </li>