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

안녕하세요, 주인장입니다.
Vue.js에서 v-for 디렉티브를 사용하다가 흔히 생기는 오류 해결 방법에 대해 알리고자 벨로그를 열게 되었습니다.

<오류메세지>부터 살펴보러 가시죠!

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

v-bind:key를 요청한다는 내용입니다.

해결 방법은 말 그대로 본인의 작성하는 코드에서, 키를 넣어주면 됩니다.

오류가 나던 제 코드는 아래와 같았습니다.

<template v-for="(item,index) in filltered_list" >
       <ListItem
         @click="() => showBooth(item.id)"
         :title="item.title"
         :content="item.content"
         :image="item.image"
         :type="item.type"
         imageAlt="이미지"
       />
     </template>

여기서, v-for에서는 키 값을 설정해주지 않았기 때문에 해당 오류가 뜨게 되었고, 제 코드에 맞는 키 값을 임의로 설정해주었습니다. 그리고 아래와 같이 해결되었습니다.

<template v-for="(item) in filltered_list" :key="item.id">
       <ListItem
         @click="() => showBooth(item.id)"
         :title="item.title"
         :content="item.content"
         :image="item.image"
         :type="item.type"
         imageAlt="이미지"
       />
     </template>