Tambahkan kelas yang berbeza pada elemen yang dicipta secara dinamik

Question

Saya mempunyai tatasusunan objek di mana setiap objek mempunyai textValue, aktif, maklumat dll. Saya akan mengulangi susunan ini dan memaparkan butang untuk setiap elemen. Untuk setiap butang di dalam saya menambah div dan dalam 3 perenggan saya cuba menambah kelas dan secara bersyarat menunjukkan beberapa perenggan pada setiap butang. Saya menambah acara pada butang dan memberikannya id supaya saya menetapkan aktiviti kepada benar dan memaparkan maklumat, ini untuk setiap id yang berbeza. Mengklik butang mencipta kelas aktif dan memaparkan kuantiti, mengklik di luar atau butang itu sendiri mengeluarkan kelas dan kuantiti (p), apabila saya mengklik butang maklumat terbuka, di sini saya mempunyai butang dan apabila diklik, maklumat div akan tersembunyi (saya sudah melakukan ini), saya ingin memastikan kelas kelihatan dan perenggan kelihatan, saya menggunakan syarat untuk ini tetapi saya tidak boleh melakukannya, berikut adalah kodnya:

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

Berfungsi apabila butang diklik dan objek aktif ditetapkan kepada benar

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

Saya mempunyai pelbagai nilai teks yang berbeza

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

Dalam komponen lain saya menghantar penapis yang dipilih (selectedFilter) di dalamnya dengan menyediakan dan menolak rujukan, di sini saya mempunyai fungsi dan apabila diklik saya mahu butang itu kekal aktif dan memaparkan perenggan berdasarkan optionButtonValue atau lain-lain tetapi simpannya aktif, di sini saya menghantar aktiviti kepada palsu untuk menyembunyikan maklumat setiap butang

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

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

Answer 1

Sebenarnya, v-jika hanya ada benar dan salah menanti anda. Tetapi anda menggunakan v-if dalam definisi teks anda. Ini tidak betul. Mula-mula, anda boleh menukar v-jika hanya bersyarat, seperti v-if="{filter.active || filter} " Juga dalam teg p anda, anda boleh terus menaip teks tukar definisi {{ filter.active && ' bla bla ' }}