<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값은 유니크값으로 해주는 것이 좋으며, 나중에 추적하는데 도움이 될 수 있다.