Vue 3의 v-for 루프에서 버튼의 활성 상태 전환
<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>
