[Vue] <template v-for> key should be placed on the <template> tag.

페이징 처리를 구현하다가 다음과 같은 에러가 발생했다.

컴파일이 실패할 정도의 에러는 아니었지만, :key 부분에 빨간 줄로 에러가 떴다..!!

 

 

[에러 발생]   VueCompilerError: <template v-for> key should be placed on the <template> tag.

 

 

 

 

해결과정

찾아보니 <template> 태그를 사용하여 여러 개의 버튼을 렌더링 하는 경우에는

'v-for' 디렉티브를 사용하여 반복되는 템플릿을 정의하고, 해당 템플릿에는 키를 지정할 수 없다고 한다.

 

올바른 방법은 각 버튼 요소에 직접 키를 지정하는 것이다.

 

예를 들어, :key="index" 부분은 각 요소의 인덱스를 key로 사용하는 것이다.

이렇게 하면 Vue.js가 각 요소를 효율적으로 관리할 수 있다. 

▼예시 코드 ▼

<template v-for="(item, index) in items" :key="index">
  <div>{{ item }}</div>
</template>

▷키(Key) 사용법

'v-bind:key' 디렉티브를 사용하여 각 요소에 고유한 키를 제공합니다. 이를 통해 Vue는 요소를 효율적으로 추적하고 관리할 수 있습니다.

 

▷키(Key)의 역할

Vue에서 키는 렌더링 된 요소를 추적하고 갱신할 때 사용됩니다.

키를 제공함으로써 Vue는 요소의 상태 변경을 더 효율적으로 감지하고 관리할 수 있습니다.

 

 

 

 

 

▼ 수정 코드 ▼

<template>
    <div>
        <button v-for="pageNumber in 5" :key="currentPage - 3 + pageNumber" @click="gotoPage(currentPage - 3 + pageNumber)" :class="{active: (currentPage - 3 + pageNumber) === currentPage}">
            {{ currentPage - 3 + pageNumber }}
        </button>
    </div>
</template>

 

위에 코드로 수정했더니 Vue.js 스타일 가이드에 따라 각 버튼에 키를 지정하고, 

eslint-plugin-vue에서 발생하는 오류를 해결했다.

 

 

 

 

결론적으로,

위 오류는 Vue.js에서 '<template v-for>' 디렉티브를 사용할 때 발생하는 오류입니다.

이 오류는 Vue에서 반복되는 요소를 렌더링 할 때 각 요소에 고유한 키를 지정해야 함을 나타냅니다.

키가 없으면 Vue가 각 요소를 식별하지 못하고 성능 문제를 발생시킬 수 있음을 유의해서 사용하면 좋을 것 같습니다.