<p>Vue 3에서 보려는 카테고리를 선택할 수 있는 필터 헤더를 만들고 있으므로 스위치를 클릭하여 필터를 전환할 수 있으며, 다른 카테고리를 클릭하면 이전 활동 카테고리가 선택 취소됩니다. 한 번에 하나의 활성 카테고리만 있거나 활성 카테고리가 없을 수 있습니다. </p> <p>토글 버튼(선택 해제하려면 다시 클릭)이 없고 v-for 루프를 사용하지 않는 jsfiddle과 같은 몇 가지 예를 찾았습니다. 나는 이것을 v-for 루프로 변환할 수 있다고 확신하지만 전환을 쉽게 수행하고 한 번에 하나의 활성 범주만 갖는 방법을 모릅니다. </p> <p>이것은 내 기본 코드입니다: </p> <pre class="brush:html;toolbar:false;"><버튼 v-for="contentCategories의 카테고리" @click="" class="필터 버튼" > {{ 범주 }} </버튼> </pre> <pre class="brush:js;toolbar:false;">const contentCategories = ["카테고리 1", "카테고리 2", "카테고리 3"]; 목록 = contentStore.resources를 보자; const activeCategory = "";; const FilteredList = 목록 .filter((e) => e.category === activeCategory) .map((e) => { e를 반환; }); </pre> <p>제가 생각하기에 필요한 동작은 활성 카테고리를 <code>activeCategory</code> 문자열에 저장하고 해당 버튼에 활성 라벨을 적용한 다음 활성 버튼을 클릭하면 제거할 수 있도록 하는 것입니다. 다시 <code>activeCategory</code> 또는 다른 버튼을 클릭하면 <code>activeCategory</code>가 변경됩니다. </p> <p>저는 Vue를 처음 접했기 때문에 이것이 간단한 해결책이라면 죄송합니다. 감사해요! </p>