[Vue.js 에러] Custom elements in iteration require 'v-bind:key' directives

 

 

Custom elements in iteration require 'v-bind:key' directives. 

라는 에러에 대한 해결법입니다. 

---

vuejs로 Todo list 만드는 강의 보면서 코드 작성하다가

eslint-plugin-vue로 자꾸 v-for 디렉티브에는 v-bind:key 추가하라는 error에 걸려서 

계속 구글링하다가 답을 찾아서 메모합니다 :)

 

2.2.0 이상에서 v-for 는 key가 필수입니다.

v-for를 돌 때에 key값은 index 혹은 별도의 id로 구별합니다.

<li v-for="(item, index) in todoItems" :key="index">
                {{ item }}
</li>

 

vue.js 공식문서에서 답을 찾았습니다

: https://kr.vuejs.org/v2/guide/list.html#v-for-%EC%99%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8