생계유지형 개발자/JS Framework

[vue] warning: component lists rendered with v-for should have explicit keys

이 가을 2020. 1. 22. 19:43

 v-for 지시자에 대한 vue컴파일러 경고 메세지

Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

콘솔에 위와 같이 Vue 컴파일러의 경고메세지가 나타난다면 v-for 지시자를 선언한 옆에 v-bind:key 또는 :key 지시자를 선언한다.

 

(v-bind):key 지시자가 없어서 경고메세지 뜬 경우

<b-list-group-item v-for="(manager, idx) in managerList">

 

(v-bind):key 지시자 선언 (v-bind:data는 없어도 경고메세지는 노출되지 않는다.)

<b-list-group-item v-for="(manager, idx) in managerList" :key="manager.id" :data="manager" >