[vue.js] Elements in iteration expect to have 'v-bind:key' directives

[개요]

'개발 레시피'라는 유튜브 채널의 Todolist 강좌를 따라 개발을 진행하는 도중 v-for에서 아래와 같은 에러가 발생했습니다.

Elements in iteration expect to have 'v-bind:key' directives

강좌에서는 vue CLI 버전이 3이어서 그런지 위와 같은 에러가 발생하지 않았지만 현재 버전은 4점대이기 때문에 에러가 발생합니다.

 

[해결방법]

v-for을 사용할 때, key 값을 설정해주면 에러는 깔끔하게 해결이 됩니다.

예를 들어, 아래와 같이 v-for을 사용할 때 배열의 각 항목을 담을 변수를 key 값으로 설정하면 됩니다.

<li v-for="todo in todoList" v-bind:key="todo.id">
</li>

 

* key 값은 중복되지 않아야 합니다.