Schalten Sie den aktiven Status der Schaltfläche in der V-for-Schleife in Vue 3 um

Question

Ich erstelle in Vue 3 eine Filterkopfzeile, in der Sie eine Kategorie zum Anzeigen auswählen können. Sie können also auf einen Schalter klicken, um den Filter umzuschalten. Wenn Sie auf eine andere Kategorie klicken, werden die Kategorien der vorherigen Aktivität dort deaktiviert Es kann jeweils nur eine oder keine aktive Kategorie sein.

Ich habe einige Beispiele gefunden, wie diese jsfiddle, die keine Umschalttaste hat (erneut klicken, um die Auswahl aufzuheben) und keine V-for-Schleife verwendet. Ich bin mir ziemlich sicher, dass ich dies in eine V-for-Schleife umwandeln kann, aber ich weiß nicht, wie ich das einfach umstellen kann, wenn immer nur eine Kategorie gleichzeitig aktiv ist.

Das ist mein Basiscode:

<button
  v-for="Kategorie in contentCategories"
  @click=""
  class="filter-button"
>
  {{ Kategorie }}
</button>

const contentCategories = ["Kategorie 1", "Kategorie 2", "Kategorie 3"];

let list = contentStore.resources;
const activeCategory = "";
const filteredList = Liste
  .filter((e) => e.category === activeCategory)
  .map((e) => {
    Rückkehr e;
});

Das Verhalten, das ich brauche, besteht meiner Meinung nach darin, die aktive Kategorie in einer activeCategory-Zeichenfolge zu speichern und die aktive Beschriftung auf die entsprechende Schaltfläche anzuwenden und sie dann entfernen zu können, wenn auf die aktive Schaltfläche geklickt wird erneut Die activeCategory oder ändert die activeCategory, wenn auf eine andere Schaltfläche geklickt wird.

Es tut mir leid, wenn dies eine einfache Lösung ist, da ich noch sehr neu bei Vue bin. Danke!

Answer 1

使用组合 API

使用额外的引用进行跟踪的简单解决方案

const selectedCategory = ref("")
const contentCategories = ref(["category 1", "category 2", "category 3"]);

<button
  v-for="category in contentCategories"
  @click="handleClick(category)"
  :class="selectedCategory === category ? 'active' : 'inactive'"
  :key="category"
>
  {{ category }}
</button>

handleClick(category) {
   selectedCategory.value = category
|

如果您想要实现多个选择能力，则跟踪类别活动

const contentCategories = ref([
  {
    name: "Category 1",
    active: false
  },
  ...
]);

<button
  v-for="category in contentCategories"
  @click="handleClick(category)"
  :class="category.active ? 'active' : 'inactive'"
  :key="category"
>
  {{ category }}
</button>

handleClick(category) {
   找到类别然后设置 active = !active，关闭其他类别
|