Gegründet 2006

v-for 예제

간단한 예를 들어, 우리는 책이 소품으로 전달했다고 가정 해 봅시다, 그러나 우리는 책이 체크 아웃되어 있는지 실제로 확인하기 위해 별도의 시스템을 호출해야합니다. 아마도이 시스템은 사용자의 로컬 라이브러리 또는 뭔가 같은 계정 정보를 고려한다. 내가 참조하는 문제는 Vue의 v-for 루프에 조건부 문을 추가하는 것입니다. 목록에 동적 UI 변경 사항이 있는 경우(예: 목록 항목 순서가 섞인 경우) Vue는 DOM 요소를 적절히 이동하는 대신 각 요소 내에서 데이터를 변경하는 쪽으로 선택합니다. 대부분의 경우 문제가 되지 않습니다. 그러나 v-for 목록이 DOM 상태 및/또는 자식 구성 요소 상태에 따라 달라지는 경우 의도하지 않은 동작이 발생할 수 있습니다. 이제 루프에 키를 포함해야 하는 이유의 배경은 Vue에게 배열의 어떤 항목(또는 객체에 대한 반복이 허용되기 때문에 객체)이 변경되는지 쉽게 볼 수 있는 방법을 제공하는 것입니다. v-for의 기본 동작은 인덱스별로 사물을 추적하는 것이므로 위에서 보여 준 메서드는 실제로 는 다소 중복됩니다 (보풀 오류를 해결하지만). Vue는 인덱스를 추적하여 항목 순서의 변화를 감시하고 주문이 변경될 때 실제로 각 항목을 패치합니다.

Vue 설명서에는 „이 기본 모드는 효율적“이라고 언급되어 있지만 주의해야 할 사항이 있으며 모든 사용 사례에 적합하지는 않습니다. 좋아, 그래서 위의 코드는 나를 위해 했던 것처럼 첫 번째 본능이 될 수 있습니다. 루프를 설정하는 동안 현재 사용자 이터레이션이 활성 사용자인지 여부를 결정하기 위해 v-if를 추가합니다. 스포일러 경고 : 이것은 작동하지 않습니다. 현재 사용자에 대한 액세스 권한을 얻으려면 v-forattached가 있는 요소의 자식에 v-if를 연결해야 합니다. v-for 지시문을 사용하여 이 Users 개체를 반복하려고 합니다. 각 루프 반복을 통해 다른 사용자를 표시합니다. 그러나 활성 상태인 사용자만 반복하려고 합니다. 사용자가 비활성 상태인 경우 기본적으로 사용자를 건너뛰려고 합니다.

시도할 수 있는 이에 대한 해결 방법이 있습니다. 이 간단한 예제에서는 v-if를

요소에 연결할 수 있습니다. 그것은 작동 하지만 이것은 간단한 예제 이며 실제로 각 루프 반복 하는 동안 만드는 많은 요소를 해야 합니다., 그래서 그들 각각에 v-if를 추가 하는 것은 실용적이지 않습니다. v-for 지시문은 데이터 원본을 기반으로 항목 목록을 렌더링하는 데 사용됩니다. 지시문은 템플릿 요소에서 사용할 수 있으며 추적할 고유 키가 없는 경우 트랙 by=“$index“을 사용할 수 있으며, v-for를 현재 위치에서 업데이트 모드로 강제 변환할 수 있습니다. , 그들은 단순히 해당 인덱스에서 새 값으로 플러시 얻을.

Comments are closed.