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

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

WARNING in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-76af726f","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/CardPage.vue
(Emitted value instead of an instance of Error) <v-col v-for="product in products">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
 @ ./src/components/CardPage.vue 7:0-249

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

warning 뜨는 코드

<v-col v-for="product in products" >

 

warning 제거 코드

<v-col v-for="product in products" :key="product.id">