[Vue] 반복문 v-for 사용하는 방법

 

안녕하세요. 혀코입니다.

이번 시간에는 Vue에서 반복문 v-for 를 사용하는 방법에 대해서 알아보겠습니다.

 

Vue 에서 리스트 형태의 데이터를 반복문을 통해 출력하려면 v-for을 사용합니다.

<template>
  <div>
    <h1>Company</h1>
    <ul>
      <li v-for="company in companies" :key="company">{{ company }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companies: ['Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss']
    }
  }
}
</script>

 

data에 companies라는 리스트 형태의 데이터가 있고, 이것을 html의 ul li에 v-for 반복문을 사용하여 리스트 형태로 출력하면 다음과 같은 결과를 볼 수 있습니다.

 

 

다음으로 배열의 index 값도 함께 출력할 수 있도록 소스코드를 변경해 보겠습니다.

<template>
  <div>
    <h1>Company</h1>
    <ul>
      <li v-for="(company, index) in companies" :key="company">{{ company }} - {{index}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companies: ['Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss']
    }
  }
}
</script>

 

company in companies 를 company, index in companies로 변경해서 index 값을 추출해서 출력할 때 사용했습니다.

 

 

이번에는 배열을 computed property를 사용해서 객체로 이루어진 새로운 배열을 만들어 출력해 보겠습니다.

<template>
  <div>
    <h1>Company</h1>
    <ul>
      <li v-for="company in newCompanies" :key="company.id">{{ company.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companies: ['Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss']
    }
  },
  computed: {
    newCompanies() {
      return this.companies.map((company, index) => {
        return {
          id: index,
          name: company
        }
      })
    }
  }
}
</script>

 

주어진 companies 배열을 활용해서 id key와 name value로 이뤄진 객체 데이터를 만들어 newCompanies라는 새로운 배열을 만들었습니다. 

이 새로운 배열을 반복문을 돌려 key 값으로 company.id 값을 지정하고, name으로 company.name을 지정했습니다.

 

여기서 특정 아이디 값을 생성할 경우, shortid라는 npm package를 사용합니다.

<template>
  <div>
    <h1>Company</h1>
    <ul>
      <li v-for="{id, name} in newCompanies" :key="id">{{ name }} - {{ id }}</li>
    </ul>
  </div>
</template>

<script>
import shortid from 'shortid'
export default {
  data() {
    return {
      companies: ['Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss']
    }
  },
  computed: {
    newCompanies() {
      return this.companies.map(company => ({
          id: shortid.generate(),
          name: company
        })
      )
    }
  }
}
</script>

 

 

이렇게 Vue에서 반복문 v-for를 사용하는 방법에 대해서 알아봤습니다.

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)