Vue.js v-for를 이용한 리스트 렌더링

안녕하세요 전진시입니다

지난 포스팅 vue 셋팅에 이어 가보겠습니다 

 

vue는 생각보다 문법이 직관적이고 쉽다고 느껴지네요

 

v-for 구문은

 

v-for = "item in array"

이렇게 생겼습니다

 

item은 array가 반복되면서 불러올 요소 하나하나를 가리킵니다.

item은 아무 이름이나 넣어줘도 됩니다. 

 

테스트 데이터를 만들어보자

data 속성에 titleArray를 정의해줍시다

titleArray는 4개의 요소로 이루어진 배열임!

  data() {
    return {
      titleArray : ['음식','일상','여행','가족'],
    }
  },

 

테스트 데이터를 만들었으니 바로 v-for 구문을 완성해보겠습니다

엇 위에서 제가 말한 구문과 다릅니다!

 

!!중요중요 (슬기와 배배!!!!!!!!!!!!!!!!!!!!)

 

1. 원래는 v-for = "item in array"로 가기로 했는데 item 자리에 (item,index)가 들어가 앉았습니다 (슬기배 필독)

  - item 다음에 들어가있는 index 는 무엇이냐 

  - item이 titleArray의 요소를 가리킨다면 index는 그 요소의 순번 즉 index를 가리킨다고 보시면 됩니다

 

2. :key는 뭐냐! (슬기배 필독)

  - key는 item의 식별자라고 봅시다. 식별자라면 key는 말그대로 고유한 값이어야 합니다.

  - 그렇다면 key에는 어떤값이 들어가야 하는가?

  - 먼저 index는 xxx -> 왜냐면 index는 요소의 위치를 나타낼 뿐 식별자로 사용하면 안됩니다.

  - 결론 item의 id를 넣자 각각의 요소 id는 요소의 고유한 식별자라고 볼 수 있겠습니다.

  - 그렇다면 id는 어디서 만드냐!

  - 그냥 item.id를 호출해주면 됩니다.

 

실행하면

짠 완료