v-for와 v-if 동시사용

v-for와 v-if의 동시사용을 금지하는 이유는 우선순위에 있다.

2.x버전에서는 v-for가 더 높은 우선순위를 가진다.

3.x버전에서는 v-if가 더 높은 우선순위를 가진다.

따라서, 두 디렉티브를 같이 사용하는 것을 지양하도록 가이드라인이 정해져있다.

하지만, v-for와 v-if를 동시사용해야 한다면 우회해서 사용하는 방법은 존재한다.

• 첫번째, 목록의 항목을 필터링 할 경우 (v-for="user in users" v-if="user.isActive") users를 활성 사용자를 반환하는 새로운 computed 속성(예:activeUsers)으로 대체한다.

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

• 두번째, 숨김 목록의 렌더링을 피할 때 (v-for="user in users" v-if="shouldShowUsers") 이 경우, v-if를 컨테이너 엘리먼트로 옮긴다. (예:ul,ol)

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>