Vue 3의 v-for 루프에서 버튼의 활성 상태 전환

Question

Vue 3에서 보려는 카테고리를 선택할 수 있는 필터 헤더를 만들고 있으므로 스위치를 클릭하여 필터를 전환할 수 있으며, 다른 카테고리를 클릭하면 이전 활동 카테고리가 선택 취소됩니다. 한 번에 하나의 활성 카테고리만 있거나 활성 카테고리가 없을 수 있습니다.

토글 버튼(선택 해제하려면 다시 클릭)이 없고 v-for 루프를 사용하지 않는 jsfiddle과 같은 몇 가지 예를 찾았습니다. 나는 이것을 v-for 루프로 변환할 수 있다고 확신하지만 전환을 쉽게 수행하고 한 번에 하나의 활성 범주만 갖는 방법을 모릅니다.

이것은 내 기본 코드입니다:

<버튼
  v-for="contentCategories의 카테고리"
  @click=""
  class="필터 버튼"
>
  {{ 범주 }}
</버튼>

const contentCategories = ["카테고리 1", "카테고리 2", "카테고리 3"];

목록 = contentStore.resources를 보자;
const activeCategory = "";;
const FilteredList = 목록
  .filter((e) => e.category === activeCategory)
  .map((e) => {
    e를 반환;
});

제가 생각하기에 필요한 동작은 활성 카테고리를 activeCategory 문자열에 저장하고 해당 버튼에 활성 라벨을 적용한 다음 활성 버튼을 클릭하면 제거할 수 있도록 하는 것입니다. 다시 activeCategory 또는 다른 버튼을 클릭하면 activeCategory가 변경됩니다.

저는 Vue를 처음 접했기 때문에 이것이 간단한 해결책이라면 죄송합니다. 감사해요!

Answer 1

조합 API 사용

추가 참조를 통한 추적을 위한 쉬운 솔루션

으아악

다중 선택 기능을 구현하려는 경우 카테고리 활동을 추적하세요

으아악