<p>Vue 3 で、表示するカテゴリを選択できるフィルタ ヘッダーを作成しています。そのため、スイッチをクリックしてフィルタを切り替えることができます。別のカテゴリをクリックすると、前のアクティビティ カテゴリの選択が解除されます。一度にアクティブなカテゴリは 1 つだけであるか、アクティブになりません。 </p> <p>この jsfiddle のような例をいくつか見つけましたが、これにはトグル ボタンがなく (選択を解除するにはもう一度クリックします)、v-for ループが使用されていません。これを v-for ループに変換できる自信はありますが、切り替えを簡単に行う方法、および一度に 1 つのアクティブ カテゴリのみを使用する方法がわかりません。 </p> <p>これは私の基本的なコードです: </p> <pre class="brush:html;toolbar:false;"><ボタン v-for="コンテンツカテゴリ内のカテゴリ" @click="" class="フィルタボタン" > {{ カテゴリー }} </ボタン> </pre> <pre class="brush:js;toolbar:false;">const contentCategories = ["カテゴリ 1", "カテゴリ 2", "カテゴリ 3"]; let list = 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>