Basculer l'état actif du bouton dans la boucle v-for dans Vue 3

Question

Je crée un en-tête de filtre dans Vue 3 où vous pouvez sélectionner une catégorie à afficher, vous pouvez donc cliquer sur un commutateur pour basculer le filtre et si vous cliquez sur une autre catégorie, cela désélectionnera les catégories d'activité précédentes, là Il ne peut y avoir qu'une ou aucune catégorie active à la fois.

J'ai trouvé quelques exemples, comme ce jsfiddle, qui n'a pas de bouton bascule (cliquez à nouveau pour désélectionner) et n'utilise pas de boucle v-for. Je suis assez sûr de pouvoir convertir cela en une boucle v-for, mais je ne sais pas comment effectuer facilement la commutation et n'avoir qu'une seule catégorie active à la fois.

Voici mon code de base :

  {{ catégorie }}

≪/pré>
const contentCategories = ["catégorie 1", "catégorie 2", "catégorie 3"];

let list = contentStore.resources;
const activeCategory = "";
const filteredList = liste
  .filter((e) => e.category === activeCategory)
  .map((e) => {
    retourner e ;
});
≪/pré>
Le comportement dont je pense avoir besoin est de stocker la catégorie active dans une chaîne activeCategory et d'appliquer l'étiquette active au bouton correspondant, puis de pouvoir la supprimer si vous cliquez sur le bouton actif. à nouveau Le activeCategory, ou modifie le activeCategory 
Je suis désolé s'il s'agit d'une solution simple car je suis très nouveau sur Vue. Merci! 

Answer 1

Utiliser l'API combinée

Solution facile pour le suivi avec des références supplémentaires

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
|

Suivez l'activité des catégories si vous souhaitez implémenter plusieurs capacités de sélection

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