Fügen Sie dynamisch erstellten Elementen verschiedene Klassen hinzu

Question

Ich habe ein Array von Objekten, wobei jedes Objekt einen Textwert, einen Aktivwert, Informationen usw. hat. Ich werde diese Anordnung durchlaufen und die Schaltflächen für jedes Element anzeigen. Für jede Schaltfläche darin füge ich ein Div hinzu und innerhalb der drei Absätze versuche ich, Klassen hinzuzufügen und bedingt einige Absätze für jede Schaltfläche anzuzeigen. Ich füge der Schaltfläche ein Ereignis hinzu und übergebe ihr eine ID, also setze ich die Aktivität auf „true“ und zeige die Informationen an, und zwar für jede unterschiedliche ID. Wenn ich auf die Schaltfläche klicke, wird eine aktive Klasse erstellt und die Menge angezeigt. Wenn ich außerhalb oder auf die Schaltfläche selbst klicke, werden die Klasse und die Menge (p) entfernt. Wenn ich auf die Schaltfläche klicke, werden die Informationen geöffnet. Hier habe ich eine Schaltfläche und wenn ich darauf klicke, werden die Div-Informationen angezeigt versteckt (das habe ich bereits getan), ich möchte die Klasse sichtbar und den Absatz sichtbar halten, ich verwende dafür Bedingungen, kann es aber nicht, hier ist der 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>

Funktion, wenn auf die Schaltfläche geklickt wird und die Aktivität des Objekts auf „True“ gesetzt ist

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
    }    
}

Ich habe eine Reihe verschiedener Textwerte

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

In einer anderen Komponente übergebe ich darin den ausgewählten Filter (selectedFilter), indem ich die Referenz bereitstelle und ablehne. Hier habe ich eine Funktion und wenn ich darauf klicke, möchte ich, dass die Schaltfläche aktiv bleibt und einen Absatz basierend auf dem optionButtonValue oder einem anderen anzeigt, ihn aber behält aktiv, hier übergebe ich die Aktivität an false, um die Informationen jeder Schaltfläche auszublenden

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

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

Answer 1

事实上，v-if 等待你的只有 true 和 false。但你在 v-if 文本定义中使用。这是不正确的。首先，您可以仅有条件地更改 v-if，如 v-if="{filter.active || filter} " 也在您的 p 标记中，您可以直接键入定义更改文本 {{ filter.active && 'bla bla' }}