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>