<p>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. </p> <p>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. </p> <p>Das ist mein Basiscode: </p> <pre class="brush:html;toolbar:false;"><button v-for="Kategorie in contentCategories" @click="" class="filter-button" > {{ Kategorie }} </button> </pre> <pre class="brush:js;toolbar:false;">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; }); </pre> <p>Das Verhalten, das ich brauche, besteht meiner Meinung nach darin, die aktive Kategorie in einer <code>activeCategory</code>-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 <code>activeCategory</code> oder ändert die <code>activeCategory</code>, wenn auf eine andere Schaltfläche geklickt wird. </p> <p>Es tut mir leid, wenn dies eine einfache Lösung ist, da ich noch sehr neu bei Vue bin. Danke! </p>

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，关闭其他类别
|