v-for

iikasam·2022년 11월 10일
0
<swiper-slide class="item_card"
	v-for="li in movieList" :key="li.id"
	@click="goDetail(li.id)">
  <img :src="image(li.poster_path)" alt="Poster">
  <h3> {{ li.title }}</h3>
 </swiper-slide>

swiper 라이브러리를 사용하여 영화리스트를 뿌려줬다.
movieList 요소들이 li에 들어가고 그 수 만큼 나온다.

여기서 v-for와 함께 따라오는 key에 대해 더 알아보았다.

데이터가 객체이면 객체 안의 특정 속성을 key 값으로 지정해줘야한다.
v-bind:key의 대상은 객체가 아니라 문자열, 숫자 같은 식별할 수 있는 값이어야 한다.

컴포넌트에서 변경된 부분을 감지할 때 key값을 이용하기 때문에 필수값이다.
key값은 유니크값으로 해주는 것이 좋으며, 나중에 추적하는데 도움이 될 수 있다.

profile
묵묵히, 꾸준히,

0개의 댓글