Add different classes to dynamically created elements
P粉573809727
P粉573809727 2023-09-11 13:34:46
0
1
453

I have an array of objects, each of which has a textValue, an active, info, etc. I will loop through this arrangement and display the buttons for each element. For each button inside I add a div and within the 3 paragraphs I try to add classes and conditionally show some paragraphs to each button. I add an event to the button and pass it an id so I set the activity to true and display the information, this for each different id. Clicking the button creates an active class and displays the quantity, clicking outside or the button itself removes the class and quantity (p), when I click the button the information opens, here I have a button and when clicked, the div information to be hidden (I already did this), I want to keep the class visible and the paragraph visible, I use conditions for this but I can't do it, here is the code:

Function when the button is clicked and the object's active is set to 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 } }

I have an array of different text values

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

In another component I am passing the selected filter (selectedFilter) in it by providing and rejecting the reference, here I have a function and when clicked I want the button to stay active and be displayed based on the optionButtonValue a paragraph or whatever, but keep it active, here I pass activity to false to hide the information for each button

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

reply all (1)
P粉239089443

In fact, v-if only has true and false waiting for you. But you use v-if in your text definition. This is not correct. First, you can change the v-if conditionally only, like v-if="{filter.active || filter} " Also in your p tag, you can directly type the definition change text {{ filter.active && ' bla bla' }}

    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!