Add different classes to dynamically created elements

Question

I have an array of objects, each of which has a textValue, an active, info, etc. I will loop through this arrangement and display the buttons for each element. For each button inside I add a div and within the 3 paragraphs I try to add classes and conditionally show some paragraphs to each button. I add an event to the button and pass it an id so I set the activity to true and display the information, this for each different id. Clicking the button creates an active class and displays the quantity, clicking outside or the button itself removes the class and quantity (p), when I click the button the information opens, here I have a button and when clicked, the div information to be hidden (I already did this), I want to keep the class visible and the paragraph visible, I use conditions for this but I can't do it, here is the 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>

Function when the button is clicked and the object's active is set to 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
    }    
}

I have an array of different text values

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

In another component I am passing the selected filter (selectedFilter) in it by providing and rejecting the reference, here I have a function and when clicked I want the button to stay active and be displayed based on the optionButtonValue a paragraph or whatever, but keep it active, here I pass activity to false to hide the information for each button

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

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

Answer 1

In fact, v-if only has true and false waiting for you. But you use v-if in your text definition. This is not correct. First, you can change the v-if conditionally only, like v-if="{filter.active || filter} " Also in your p tag, you can directly type the definition change text {{ filter.active && ' bla bla' }}< /p>