在動態建立的元素中添加不同的類
我有一個物件數組，其中每個物件都有一個 textValue、一個 active、info 等。我將遍歷這種排列並顯示每個元素的按鈕。對於裡面的每個按鈕，我新增一個 div，在 3 個段落中，我嘗試新增類別並按條件向每個按鈕顯示一些段落。我向按鈕添加一個事件並向其傳遞一個 id，這樣我將活動設為 true 並顯示訊息，這針對每個不同的 id。點擊按鈕會建立活動類別並顯示數量，點擊外部或按鈕本身會消除類別和數量（p），當我點擊按鈕時，訊息會打開，這裡我有一個按鈕，點擊時，div訊息被隱藏（我已經這樣做了），我想保持類別可見和段落可見，我為此使用條件，但我做不到，這是程式碼：
<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>
點擊按鈕並將物件的 active 設為 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
}
}
我有不同文字值的陣列
const optionButtonValue = ['Uso de suelo', 'Amenidades', 'Clasificación de la tierra', 'Vocaciones' ]
在另一個元件中，我透過提供和拒絕引用，在其中傳遞選定的過濾器（selectedFilter），這裡我有一個函數，當點擊時，我希望按鈕保持活動狀態，並根據optionButtonValue 顯示一個段落或其他，但保持其活動狀態，在這裡我將活動傳遞給false 以隱藏每個按鈕的訊息
const showResults = () => {
console.log('Mostrar resultados')
landsStore.lands = []
landsStore.landsadd = []
selectedFilter.value.active = false
landsStore.fetchLands('', { filters: filtersStore.getAllFiltersAlgoliaFormat, facetFilters: filtersStore.getAllFacetFilterFormat })
}