Ajouter différentes classes aux éléments créés dynamiquement

Question

J'ai un tableau d'objets où chaque objet a une valeur de texte, un actif, une information, etc. Je vais parcourir cet arrangement et afficher les boutons de chaque élément. Pour chaque bouton à l'intérieur, j'ajoute un div et dans les 3 paragraphes, j'essaie d'ajouter des classes et d'afficher conditionnellement quelques paragraphes à chaque bouton. J'ajoute un événement au bouton et lui passe un identifiant afin de définir l'activité sur true et d'afficher les informations, ceci pour chaque identifiant différent. Cliquer sur le bouton crée une classe active et affiche la quantité, cliquer à l'extérieur ou le bouton lui-même supprime la classe et la quantité (p), quand je clique sur le bouton, l'information s'ouvre, ici j'ai un bouton et lorsque je clique, les informations div à être caché (je l'ai déjà fait), je veux garder la classe visible et le paragraphe visible, j'utilise des conditions pour cela mais je n'y arrive pas, voici le code :

<button 
  v-for="filter in addedFilters" 
  :key="filter" 
  :value="filter.textValue" 
  @click="(e) => {openInfoFiltro(filter, e)}" 
  :class="{'filter-active': filter.active && !optionButtonValue.includes(filter.textValue),  'active-filter-options': filter.active && optionButtonValue.includes(filter.textValue)}">
      <div>
         <p v-if="filter.active && filter.textValue !== 'Uso de suelo' && filter.textValue !== 'Amenidades' && filter.textValue !== 'Clasificación de la tierra' & filter.textValue !== 'Vocaciones'" class="m-0">
           {{ $filters.numeralFormatBtnInfo(filter.info[0]) }} - {{$filters.numeralFormatBtnInfo(filter.info[1]) }}
         </p>

         <p v-else-if="filter.active || filter.textValue === 'Uso de suelo' && filter.textValue === 'Amenidades' && filter.textValue === 'Clasificación de la tierra' && filter.textValue === 'Vocaciones'" class="m-0 amount"> 
             <span v-if="filter.info">({{filter.info === 0 ? '' : filter.info }})</span>
         </p>

         <p class="m-0">{{filter.textValue}}</p>
      </div>
  </button>

Fonction lorsque l'on clique sur le bouton et que l'actif de l'objet est défini sur true

const openInfoFiltro = (id,e) => {
    selectedFilter.value = addedFilters.value.find(val => val.textValue === id.textValue);
    console.log(selectedFilter.value)
    if(selectedFilter.value){
        selectedFilter.value.active = !selectedFilter.value.active
    }    
}

J'ai un tableau de valeurs de texte différentes

const optionButtonValue = ['Uso de suelo', 'Amenidades', 'Clasificación de la tierra', 'Vocaciones' ]

Dans un autre composant, j'y passe le filtre sélectionné (selectedFilter) en fournissant et en rejetant la référence, ici j'ai une fonction et lorsque je clique dessus, je veux que le bouton reste actif et affiche un paragraphe basé sur l'optionButtonValue ou autre mais le garde active, ici je passe l'activité à false pour masquer les informations de chaque bouton

const showResults = () => {
  console.log('Mostrar resultados')
  landsStore.lands = []
  landsStore.landsadd = []
  selectedFilter.value.active = false

  landsStore.fetchLands('', { filters: filtersStore.getAllFiltersAlgoliaFormat, facetFilters: filtersStore.getAllFacetFilterFormat })
}

Answer 1

En fait, v-si seulement vous attend du vrai et du faux. Mais vous utilisez v-if dans votre définition de texte. Ce n'est pas exact. Tout d'abord, vous pouvez modifier le v-if uniquement de manière conditionnelle, comme v-if="{filter.active || filter} " Également dans votre balise p, vous pouvez directement taper le texte de changement de définition {{ filter.active && ' bla bla ' }}