Ошибка в v-for="todo of todos" во Vue.js. Какой правильный синтаксис v-for?

Question

[EvgenJunior]

При использования директивы v-for="todo in todos" выдается ошибка:

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)

Доку прочитал, но про v-for особо не чего не написано.
Пример кода который вызывает ошибку:

<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>

Подскажите что не так с кодом и почему ошибка?

Comments

[Михаил]

error Custom elements in iteration require 'v-bind:key' directives vue/valid-v-for

что же с кодом не так?
действительно

Answer 1

[Юрий]

Написано же, что нужен ключ:

v-for="(todo, index) in todos" :key="index"

Comments

[EvgenJunior]

спасибо