Fügen Sie dynamisch erstellten Elementen verschiedene Klassen hinzu
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 })
}