Elements in iteration expect to have ‘v-bind:key’ directives

문제#

이전 버전의 강좌를 보고 따라 하던 도중 vue template에서 li 에 v-for 를 이용해서 v-for=“t in tries” 루프를 생성하고 싶었으니 오류를 만나게 되었습니다.

<!-- 문제가 발생한 코드 -->
<li v-for="item in tries"> 
	{{item}}
</li>

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

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

수정사항적용#

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

참조#

[Vue.js 에러] Custom elements in iteration require ‘v-bind:key’ directives 뷰 공식 문서