[vue 3] 06.v-for

이번 포스트에서는 배열(list)의 element, object의 property 등 반복적인 데이터를 렌더링할 때 사용되는 v-for directive에 대해서 살펴보자.

 

v-for

 

v-for

v-for는 반복문을 사용하기 위한 directive 이다. list의 element나 object의 property를 이용해서 li 태그를 구성할 경우 아래와 같이 작성할 수 있다. 부모 요소가 아닌 반복될 요소에 v-for를 적용한다.

<!-- 배열 순회의 경우-->
<ul>
  <li v-for="(value, index) in data">{{index}}, {{value}}</li>
</ul>

<!-- 객체 순회의 경우 -->
<ul>
  <li v-for="(value, key, index) in data">{{index}}, {{key}}, {{value}}</li>
</ul>

여기서 data는 model에서 expose 되는 데이터로 list(iterable) 또는 object일 수 있다. data가 list인 경우는 value와 함께 index 만 전달된다.  data가 객체일 경우는 value, key, index를 갖는다. 여기서 index는 0부터 1씩 증가하는 값이다. value등을 묶는 () 는 생략될 수 있다.

만약 특정 범위를 반복하는 구문을 만들고 싶다면 아래와 같이 사용한다. 아래 코드는 1부터 10까지 범위의 숫자를 출력하게 된다. 

<span v-for="n in 10">{{ n }}</span>

 

활용 예

v-for를 활용한 예를 살펴보자.

먼저 출력하기 위한 model을 준비한다.

  <script>
    const { createApp, ref, reactive } = Vue;
    createApp({
      setup() {
        const heroes = ref(["iron man", "hulk", "captain america", "spider man"]);
        const ironMan = reactive({
          name: "토니스타크",
          canFly: true,
        });
        const range = ref(9);
        return {
          heroes,
          ironMan,
          range,
        };
      },
    }).mount("#app");
  </script>

위 데이터를 사용하는 간단한 v-for 문의 예를 살펴보자.

<div id="app">
    <h1>배열 표현</h1>
    <ul>
        <li v-for="(hero, index) in heroes">{{index}} - {{hero}}</li>
    </ul>

    <h1>객체 표현</h1>
    <ul>
        <li v-for="(value, key, index) in ironMan">{{index}} - {{key}}: {{value}}</li>
    </ul>

    <h1>범위 반복</h1>
    <template v-for="n in range">
        <div>구구단 {{n}}단</div>
        <span v-for="m in 9"> {{n}} * {{m}} = {{n*m}}&nbsp;&nbsp; </span>
    </template>
</div>

맨 마지막 for 문에서는 div와 span을 하나의 v-for 문 반복 단위로 묶기 위해서 <template>이 사용된 것도 기억해둘 대목이다.

 

:key

특히 v-for 를 통해서 반복되는 element에 key 속성을 v-bind를 통해 binding 시켜서 사용할 수 있다. 이때 key에는 반복되는 요소를 구별할 수 있는 unique한 값이 사용된다.

<div id="app">
  <ul>
    <li v-for="item, idx in list" :key="item" >
      {{item}} : <input type="number" /> 개
    </li>
  </ul>
<button v-on:click="shift">shift</button>
</div>

:key를 사용했을 때의 장점은 다음의 post를 참조하자.

https://goodteacher.tistory.com/709

[vue 3] v-for와 key

 

 

v-if와 v-for의 혼용 주의

반복문을 작성하다보면 특정 조건에 만족하지 않는 경우는 출력을 제한하고 싶은 경우가 자주 발생한다. 그래서 v-for와 함께 v-if를 섞어서 사용하려는 시도를 많이 한다. 중요한 점은 이렇게 v-for와 v-if를  하나의 element에서 사용할 경우 v-if의 우선 순위가 더 높다는 점이다. (vue 2.x까지는 이 관계가 모호해서 혼돈스러웠다.)

예를 들어 다음의 코드는 1 ~ 9까지의 수 중에서 i가 짝수일 경우만 그 제곱을 출력하려는 의도로 작성되었다.

<ul>
  <li v-for="i in 9" v-if="i%2==0">{{i}} * {{i}} = {{i*i}}</li>
</ul>

하지만 실제로는 v-if가 먼저 동작하고 그 시점에 i는 존재하지 않기 때문에 아래와 같은 warn이 발생한다.

따라서 기본 원칙은 2개의 directive를 같은 element에서 사용하지 않는 것이 좋다. 그리고 <template>를 이용해서 분리하거나 computed 등을 이용해서 filtering 된 목록으로 사용하면 된다.

<ul>
  <template v-for="i in 9">
    <li v-if="i%2==0">{{i}} * {{i}} = {{i*i}}</li>
  </template>
</ul>