소소한 코딩일지

Vue를 사용하여 개인 프로젝트를 제작하면서 v-for를 사용할 일이 아주 많았다. v-for를 아무 생각 없이 사용했을 때 어떤 일이 일어나는지 공유해두면 좋을 것 같아 작성하게 되었다. 우선 내가 원한 방향은 한 축구 클럽의 최근 10경기의 결과를 v-for로 보여주고 싶었다. 처음 작성한 대로 10경기의 결과가 form 변수에 저장되어 있고, v-for를 통해 하나씩 불러오면서 적절한 디자인을 적용시켜 찍어 주었다. ( 10경기에 대한 데이터가 제대로 저장되는 부분은 확인했습니다. ) 하지만 결과는 페이지 전환시 10경기가 제대로 보이지만 다른 클럽으로 화면을 전환할 경우 기존의 값이 일부 누적되는 이슈가 발생했다. 그래서 코드를 인덱스와 함께 처리하며 key를 index로 선언하는 방법으로 v-f..

개인 프로젝트 도중 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 속성을 사용하여 사전에 필터링하는 것을 추천..