在動態建立的元素中添加不同的類
P粉573809727
P粉573809727 2023-09-11 13:34:46
0
1
546

我有一個物件數組,其中每個物件都有一個 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 })
}

P粉573809727
P粉573809727

全部回覆(1)
P粉239089443

事實上,v-if 等待你的只有 true 和 false。但你在 v-if 文字定義中使用。這是不正確的。首先,您可以僅有條件地更改v-if,如v-if="{filter.active || filter} " 也在您的p 標記中,您可以直接鍵入定義更改文字{{ filter.active && ' bla bla' }}

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板