#Boolean does not react in <template>

1 messages · Page 1 of 1 (latest)

umbral sequoia
#

I have this:

let activeOldEvents = false





<h2 id="accordion-flush-heading-1">
    <button v-on:click="activeOldEvents = !activeOldEvents" type="button" class="flex items-center justify-between w-full mt-5 mb-2 font-medium text-left text-gray-500 font-bold dark:border-gray-700 dark:text-gray-400">
        <span>Vergangene Events anzeigen</span>
        <svg data-accordion-icon class="w-6 h-6 shrink-0" :class="activeOldEvents ? 'rotate-0' : 'rotate-180'" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
</h2>
<div class="grid grid-cols-6 gap-6" v-show="activeOldEvents">
    <div v-for="event in oldEventsSorted" class="sm:max-sm:mb-3 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg col-span-6 sm:col-span-3">
        <a :href="'/event/' + event.event_id">
            <div :style="eventBgString" class="relative w-full aspect-square overflow-hidden rounded-lg h-48 bg-cover bg-center from-[#1F2937] bg-cover before:absolute before:inset-0 before:bg-gradient-to-t">
                <h1 class="text-3xl font-bold bottom-0 absolute m-5 text-white">{{ event.title }}</h1>
                <span class="text-white font-bold absolute m-5"><i class="fa-regular fa-calendar-days mr-1 fa-fw"></i> {{ moment(event.date).format('dddd, Do MMMM YYYY') }}</span>
                <span class="text-white font-bold absolute m-5"><i class="fa-regular fa-clock mr-1 mt-8 fa-fw"></i> {{ moment(event.date).format('H:mm') + ' Uhr' }}</span>
            </div>
        </a>
    </div>
</div>

But somehow the div does not get active when clicking the button, eventhough "activeOldEvents" is definitely set to true, I logged it. Why is that?

#

Funny thing:
If I click the button so the var is "true", then change something inside the code and save, it shows. So it looks like the frontend part isnt working correctly?

umbral sequoia
#

no one?

#

Fixed it using this:

const showOldEvents = () => {
    activeOldEvents.value = !activeOldEvents.value
    console.log(activeOldEvents)
};

Can someone explain why my old method did not work?