Vue 3 の v-for ループでボタンのアクティブ状態を切り替える

Question

Vue 3 で、表示するカテゴリを選択できるフィルタ ヘッダーを作成しています。そのため、スイッチをクリックしてフィルタを切り替えることができます。別のカテゴリをクリックすると、前のアクティビティ カテゴリの選択が解除されます。一度にアクティブなカテゴリは 1 つだけであるか、アクティブになりません。

この jsfiddle のような例をいくつか見つけましたが、これにはトグル ボタンがなく (選択を解除するにはもう一度クリックします)、v-for ループが使用されていません。これを v-for ループに変換できる自信はありますが、切り替えを簡単に行う方法、および一度に 1 つのアクティブ カテゴリのみを使用する方法がわかりません。

これは私の基本的なコードです:

<ボタン
  v-for="コンテンツカテゴリ内のカテゴリ"
  @click=""
  class="フィルタボタン"
>
  {{ カテゴリー }}
</ボタン>

const contentCategories = ["カテゴリ 1", "カテゴリ 2", "カテゴリ 3"];

let list = contentStore.resources;
const activeCategory = "";
const filteredList = リスト
  .filter((e) => e.category === activeCategory)
  .map((e) => {
    eを返します。
});

必要だと思う動作は、アクティブなカテゴリを activeCategory 文字列に保存し、対応するボタンにアクティブなラベルを適用し、アクティブなボタンがクリックされた場合に削除できるようにすることです。再度 activeCategory を使用するか、別のボタンをクリックすると activeCategory が変更されます。

私は Vue を初めて使用するため、これが簡単な解決策だったら申し訳ありません。ありがとう！

Answer 1

組み合わせ API の使用

追加の参照を使用した追跡のための簡単なソリューション

リーリー

複数選択機能を実装する場合は、カテゴリのアクティビティを追跡します

リーリー