Vue3 기초: 조건부 리스트 렌더링

 

지난시간에 배열과 객체 등을 리스트로 화면에 그려내는 것까지 해보았다.

 

이번에는 for 반복을 통하여 리스트를 그려내되, 조건에 따라서 특정 항목들만 그려내는 방법에 대해서 알아보도록 하자.

 

단순히 이전에 공부했던 v-for와 v-if(혹은 v-show)를 함께 사용하면 되지 않을까? 라고 생각하였지만, vue3에서는 한 태그에 v-for와 v-if를 함께 사용할 수 없도록 해두었다.

 

공식 홈페이지에는 v-if와 v-for가 같이 쓰이면 v-if가 먼저 평가된다고 적혀있지만 실제로 해보면 그냥 에러난다

 

그렇다면 어떻게 반복을 돌면서 조건문을 적용할 수 있을까?

 

방법에는 여러가지가 있겠지만 2가지만 소개하겠다.

 

먼저, 고계함수를 이용하는 방법이 있다. 그중에서도 filter가 아주 효과적이라고 볼 수 있겠다.

 

<template>
  <div>
    <h1>Hello Vue!</h1>
    <ul>
      <li
        v-for="(city, index) in cities.filter(
          (city) => city.province === '경상도'
        )"
        :key="index"
      >
        {{ city.name }}
      </li>
    </ul>
   </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cities: [
        { name: "서울", province: "경기도" },
        { name: "대전", province: "충청도" },
        { name: "대구", province: "경상도" },
        { name: "부산", province: "경상도" },
        { name: "인천", province: "경기도" },
        { name: "광주", province: "전라도" },
      ],
    };
  },
};
</script>

<style></style>

 

 

도시의 정보들을 가진  데이터 cities에서 지역이 경상도인 도시의 이름만을 그려내기 위한 코드이다.

 

위와 같이 filter를 이용하여 province값을 비교한 조건문을 바탕으로 경상도에 위치한 도시들의 이름만을 렌더링 할 수 있다.

 

 

 

두번째 방법으로는 HTML5에서 제공하는 template 태그를 이용하는 방법이 있다.

 

template 태그는 DOM이 인스턴스화 하기 전에 사라지기 때문에 실제 화면에는 그려지지 않는다. 

따라서 다음과 같은 코드로 원하는 내용만을 그려낼 수 있을 것이다.

 

<template>
  <div>
    <ul>
      <template v-for="(city, index) in cities" :key="index">
        <li v-if="city.province === '경기도'">
          {{ city.name }}
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cities: [
        { name: "서울", province: "경기도" },
        { name: "대전", province: "충청도" },
        { name: "대구", province: "경상도" },
        { name: "부산", province: "경상도" },
        { name: "인천", province: "경기도" },
        { name: "광주", province: "전라도" },
      ],
    };
  },
};
</script>

<style></style>

ul태그 안에서 template 태그를 넣어주고 template 태그에는 v-for를 이용하여 반복문을 돌게끔하고 그 안에있는 li태그에 v-if를 주어서 실제 렌더링을 할지 말지 조건 검사를 하도록하여 구현할 수 있다.