[Vue.js] v-if 와 v-for의 우선순위

개인 프로젝트 도중  v-for로 반복하는 요소에 대해서 v-if문을 사용하려 했지만

오류 발생으로 다른 방법을 사용해야 했다.

 

오류 해결 중에 v-if와 v-for에 우선순위가 존재한다는 것을 알게 되었고, 정리해두려고 한다.

 

우선 공식 문서에 따른 두 구문의 우선순위는 다음과 같다.

 

2.x 버전
2.x 버전에서는 동일한 요소에 관해 v-if 와 v-for를 동시에 사용할 경우 v-for가 더 높은 우선순위를 갖는다.

 

3.x 버전
3.x 버전의 경우 v-if가 항상 더 높은 우선순위를 갖는다.

 

 

하지만 v-if와 v-for를 동시에 사용하는 것은 구문이 모호해지기 때문에 권장하는 방식은 아니라고 한다.

두가지를 동시에 사용하기보다 엘리먼트 목록을 computed 속성을 사용하여 사전에 필터링하는 것을 추천하고 있다.

 

Reference

v-if와 v-for의 우선순위 | Vue.js