[Vue] options api로 웹사이트 만들기 - 3. v-for로 리스트 뿌려주기

시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! :  https://youthful-heyrovsky-6bcc71.netlify.app/ 

vue2-options

코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요!

GitHub - yoycode/vue2-options

저번시간에 데이터를 받아와 브라우저에 뿌려주는 것까지 봤었는데요, ( 이전 글 : https://imagineu.tistory.com/61 )

[Vue] options api로 웹사이트 만들기 - 2. axios로 API 요청하기 ( + axios 전역사용)

그럼 이렇게 구조가 똑같이 반복되는 객체들을 v-for문을 이용해서 뿌려주겠습니다. 

1. v-for문 사용법

우선 v-for의 사용법은 태그안에 v-for="내가 정한 아이템명 in 배열"  :key="유니크값" 이렇게 작성하면 됩니다. 아이템명 뿐만아니라 v-for="( 아이템명, 인덱스 ) in 배열" 처럼 index를 같이 받아올 수도 있습니다. 내가 정한 아이템명으로 해당 v-for 내부에서 사용할 수 있습니다. 

그리고 v-for를 사용했다면 반드시 key값도 같이 넣어줘야합니다. key는 각각의 아이템이 가지는 유니크한 값을 넣어주면 되는데요, 저는 받아온 데이터에 id값으로 유니크한 값이 들어있기 때문에  id를 넣어줬습니다. 그리고 하나의 글 정보안에 또 태그 정보를 배열형태로 가지고 있는데요. 배열도 v-for를 이용해 뿌려주었습니다. 하지만 각각의 태그는 유니크한 값을 가지는 id가 없기때문에, tag자체를 key값으로 가지거나, index를 key값으로 넣어주어야 합니다. 언뜻보기엔 index가 0,1,2...처럼 1씩 증가하기 때문에 유니크한 값처럼 보이지만, 정렬이나 삭제 등 데이터변경으로 인해 index값이 달라지는 경우에 문제가 생길 수도 있어 index를 key값으로 넣는 방법은 좋은 방법은 아닙니다. 항상 유니크한 값을 최우선으로 key값을 넣어주세요!

2.  v-for문으로 반복해서 뿌려주기

v-sheet와 v-chip에 v-for사용

각각의 글 정보를 각각의 v-sheet에 담아 v-for문으로 반복해서 뿌려주었습니다. 글 안에 들어있는 태그 배열 또한 v-chip을 반복해 뿌려주었습니다. (여기서 v-sheet와 v-chip은 vuetify에서 제공하는 UI컴포넌트입니다. vuetify를 잘 모르시는 분들은 그냥 css예쁘게 들어간 <div>나 <span>정도로 생각하시면 될 것 같습니다. (아래 코드 참고)

<div v-for="item in list" :key="item.id"> 이게 v-sheet 부분 </div>

<span v-for="(tag, index)" in item.tags" :key="index"> 이게 v-chip 부분 </span>

 

그럼 다음 글에서는 컴포넌트화 하는법을 알아보겠습니다.