@EvgenJunior

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

При использования директивы 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>

Подскажите что не так с кодом и почему ошибка?
  • Вопрос задан
  • 482 просмотра
Решения вопроса 1
@cheeroque
Написано же, что нужен ключ:

v-for="(todo, index) in todos" :key="index"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы