Error in v-for="todo of todos" in Vue.js. What is the correct v-for syntax?

Question

Vue.js

When using the v-for="todo in todos" directive, an error is thrown:

Failed to compile.

./src/components/TodoList.vue
Module Error (from ./node_modules/eslint-loader/index.js):

D:\vue\vue-beganning\src\components\TodoList.vue
  4:7  error  Custom elements in iteration require 'v-bind:key' directives  vue/valid-v-for

✖ 1 problem (1 error, 0 warnings)

I read the Doc, but not much has been written about v-for.
An example of code that causes an error:

<template>
  <div>
    <ul>
      <TodoItem
        v-for="todo in todos"
        v-bind:todo="todo"
      />
    </ul>
  </div>
</template>

<script>
import TodoItem from '@/components/TodoItem'
export default {
  props: ['todos'],
  components: {
    TodoItem
  }
}

</script>

Tell me what's wrong with the code and why the error?

Answer 1

It says that you need a key:
v-for="(todo, index) in todos" :key="index"